Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Creating a Stylish Search Box Using CSS

In this article you will see all the steps necessary to develop some seach boxes using only CSS and add them to your applications.

In this tutorial we are going to learn how to make a simple search box. As we know that it is an important part of modern webpages. Further we will discuss three different kinds of search input boxes with the help of CSS. Before moving further let us discuss some basic properties of CSS which will help newbies to understand this article in an easy way. If you know CSS then you can skip these basics.

HTML5 <input> placeholder Attribute.

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).The short hint is displayed in the input field before the user enters a value.

Note:The placeholder attribute works with the following input types: text, search, url, email, and password.

Listing1: Syntax of placeholder.

<input placeholder=”text”>

In Listing 1, we assigned the value “text” to placeholder. The value “text” specifies a short hint that describes the expected value of the input field. To understand its working let’s move to Listing 2.

Listing 2: Code for showing a hint for expected value to be taken as an input.

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="Submit">
</form>
<p><strong>Note:</strong> The placeholder attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>

Figure 1: Showing a hint for expected value in each input box.

In Listing 2, we have defined two text boxes in which placeholder has given values. These values are then visible when you run the code, as shown in Figure 1.

CSS Padding

The CSS padding properties define the space between the element border and the element content. The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.

The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once. The paddingproperty can have from one to four values.

In CSS, it is possible to specify different padding for different sides. For example,

Listing 3: Adjusting space between the element border and the element content using padding.

<!DOCTYPE html>
<html>
<head>
<style>
 p {
    background-color: yellow;
}
p.padding {
    padding-top: 25px;
    padding-right: 50px;
    padding-bottom: 25px;
    padding-left: 50px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>
</html>

Figure 2: Space between the element border and content is adjusted.

In Listing 3, we have defined two paragraphs. We assigned a class, named padding, to second paragraph<p>, in order to apply CSS properties to this tag. Within <style> tag, we applied only background-color property to both the <p> tags. While a class is defined in which padding properties are defined. It will select and style all elements with class=”padding”.

CSS Margin

The CSS margin properties define the space around elements. The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.

calcThe top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

Possible values of Margin

Value

Description

Auto

The browser calculates a margin

Length

Specifies a margin in px, pt, cm, etc. Default value is 0px

%

Specifies a margin in percent of the width of the containing element

Inherit

Specifies that the margin should be inherited from the parent element

Table 1: Shows different values of Margin.

In CSS, it is possible to specify different margins for different sides of an element. For example in Listing 4.

Listing 4: Using CSS margin to define space around elements.

<!DOCTYPE html>                                                            
<html>
<head>
<style>
p {
    background-color: yellow;
}
p.ex {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 50px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins.</p>
<p class="ex">This is a paragraph with specified margins.</p>
</body>
</html>

Figure 3: Using margin to for adjusting space around elements.

Listing 4, code is similar to Listing 3 only we have used Margin attribute.

CSS3 box-sizing Property

The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.

Listing 5: Syntax of box sizing

box-sizing: content-box|border-box|initial|inherit;

Description of syntax:

Value

Description

content-box

Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included

border-box

The width and height properties (and min/max properties) includes content, padding and border, but not the margin

initial

Sets this property to its default value.

inherit

Inherits this property from its parent element.

Table 2: Description of syntax of box-sizing.

Listing 6: Fixing sizing properties using box-sizing in CSS.

<!DOCTYPE html>
<html>
<head>
<style> 
.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
}
 
.div2 {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
}
 
.div3 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}
 
.div4 {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}
</style>
</head>
<body>
 
<h2>Without box-sizing</h2>
<div class="div1">This div is smaller (width is 300px and height is 100px).</div>
<br>
<div class="div2">This div is bigger (width is also 300px and height is 100px).</div>
 
<h2>With box-sizing</h2>
<div class="div3">Both divs are the same size now!</div>
<br>
<div class="div4">Hooray!</div>
 
</body>
</html>

Figure 4: Adjusting sizing using box-sizing property.

In Listing 6, four div classes are defined with <style> </style> tags. First two are simple while in div3 and div4 we have defined box-sizing property of CSS. Implementing these properties in HTML you will notice that box-sizing property is very helpful as both divs (dive3 & div4) are of the same size now, as shown in output in Figure 4.

Note: Every current browser supportsbox-sizing: border-box;unprefixed, so the need for vendor prefixes is fading. But, if you need to support older versions of Safari (< 5.1), Chrome (< 10), and Firefox (< 29), you should include the prefixes-webkit and –moz.

Creating First type of search box using CSS.

Now let’s move to our main topic of creating different search box in CSS. I have covered the main properties of CSS in advance which will be used in creation of stylish search box. We will discuss three types of search box.

First type of search box using CSS.

First of all let’s create a simple search box.

Listing 7: Code for creating a simple search box.

<!DOCTYPE html>
<html>
<head>
<title> Desigining of simple search Button</title>
</head>
<body>
<!-- search form 1 -->
<form class="searchbox_1" action="">
<input type="search" class="search_1" placeholder="Search" />
<button type="submit" class="submit_1" value="search">&nbsp;</button>
</form>
</body>
</html>

In Listing 7, a formed is created using <form></form> tags, to which “searchbox_1” class of CSS is applied. After that search button is created, to which “search_1” class property is applied. At this point you will be aware of “placeholder” as it is discussed in detail at start of this article. Also a submit button is created to which “submit_1” class is applied. Running the code you will see output as shown in Figure 5.

Figure 5: A form with search button is created.

Now let’s add some CSS to make to make our first colorful search box.

Listing 8: Code for creating our first stylish search box.

<!DOCTYPE html>
<html>
   <head>
      <title> Desigining of simple search Button</title>
   </head>
   <style type="text/css">
      /* search box*/
      .searchbox_1{
      background-color: #fffbf8;
      padding:13px;
      width:335px;
      margin: 100px auto;
      -webkit-box-sizing:border-box;
      -moz-box-sizing:border-box;
      box-sizing:border-box;
      border-radius:6px;
      -webkit-box-shadow:
      0 2px 4px 0 rgba(72, 72, 72, 0.83),
      0 10px 15px 0 rgba(126, 126, 126, 0.12),
      0 -2px 6px 1px rgba(199, 199, 199, 0.55) inset,
      0 2px 4px 2px rgba(255, 255, 255, 0.83) inset;
      -moz-box-shadow:
      0 2px 4px 0 rgba(72, 72, 72, 0.83),
      0 10px 15px 0 rgba(126, 126, 126, 0.12),
      0 -2px 6px 1px rgba(199, 199, 199, 0.55) inset,
      0 2px 4px 2px rgba(255, 255, 255, 0.83) inset;
      box-shadow:
      0 2px 4px 0 rgba(72, 72, 72, 0.83),
      0 10px 15px 0 rgba(126, 126, 126, 0.12),
      0 -2px 6px 1px rgba(199, 199, 199, 0.55) inset,
      0 2px 4px 2px rgba(255, 255, 255, 0.83) inset;
      }
      .search_1{
      width:250px;
      height:30px;
      padding-left:15px;
      border-radius:6px;
      border:none;
      color:#0F0D0D;;
      font-weight:500;
      background-color:#E2EFF7;;
      -webkit-box-shadow:
      0 -2px 2px 0 rgba(199, 199, 199, 0.55),
      0 1px 1px 0 #fff,
      0 2px 2px 1px #fafafa,
      0 2px 4px 0 #b2b2b2 inset,
      0 -1px 1px 0 #f2f2f2 inset,
      0 15px 15px 0 rgba(41, 41, 41, 0.09) inset;
      -moz-box-shadow:
      0 -2px 2px 0 rgba(199, 199, 199, 0.55),
      0 1px 1px 0 #fff,
      0 2px 2px 1px #fafafa,
      0 2px 4px 0 #b2b2b2 inset,
      0 -1px 1px 0 #f2f2f2 inset,
      0 15px 15px 0 rgba(41, 41, 41, 0.09) inset;
      box-shadow:
      0 -2px 2px 0 rgba(199, 199, 199, 0.55),
      0 1px 1px 0 #fff,
      0 2px 2px 1px #fafafa,
      0 2px 4px 0 #b2b2b2 inset,
      0 -1px 1px 0 #f2f2f2 inset,
      0 15px 15px 0 rgba(41, 41, 41, 0.09) inset;
      }
      .submit_1{
      width:35px;
      height:30px;
      background-image:url(img/search-btn.png);
      background-repeat: no-repeat;
      background-position: 17px 2px;
      background-color:transparent;
      -webkit-background-size:20px 20px;
      background-size:20px 20px;
      border:none;
      cursor:pointer;
      }
      .search_1:focus{
      outline:0;
      }
   </style>
   <body>
      <!-- search form 1 -->
      <form class="searchbox_1" action="">
         <input type="search" class="search_1" placeholder="Search" />
         <button type="submit" class="submit_1" value="search"> </button>
      </form>
   </body>
</html>

In Listing 8, we have added some internal CSS within <style></style> tags. Three class are formed, in which searchbox_1 is formed for whole form, which means that style of this class is applied to whole form in HTML. Second class Search_1 is formed for search box and is applied only to it. Third class submit_1 is formed for submit button only. Finally a property focus, is applied to search_1 class whose purpose is that when you enter into search box for typing of something, your border color of search box will not change if outline:0;

Figure 6: Our first stylish search box.

Second type of search box using CSS.

Using same code as in Listing 7, we will create a simple form and then will add different CSS styling in order to get a different type of search box. Let’s move to Listing 9.

Listing 9: Code to obtain second type of stylish search box.

<!DOCTYPE html>
<head>
   <title>Design search Button</title>
</head>
<style type="text/css">
   /* search box*/
   #search-form_3 {
   background: #e1e1e1; /* Fallback color for non-css3 browsers */
   width: 365px;
   margin: 100px auto;
   /* Gradients */
   background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));
   background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);
   /* Rounded Corners */
   border-radius: 17px;
   -webkit-border-radius: 17px;
   -moz-border-radius: 17px;
   /* Shadows */
   box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
   -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
   -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
   }
   /*** TEXT BOX ***/
   .search_3{
   background: #fafafa; /* Fallback color for non-css3 browsers */
   /* Gradients */
   background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
   background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);
   border: 0;
   border-bottom: 1px solid #fff;
   border-right: 1px solid rgba(255,255,255,.8);
   font-size: 16px;
   margin: 4px;
   padding: 5px;
   width: 250px;
   /* Rounded Corners */
   border-radius: 17px;
   -webkit-border-radius: 17px;
   -moz-border-radius: 17px;
   /* Shadows */
   box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
   -webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
   -moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
   }
   /*** USER IS FOCUSED ON TEXT BOX ***/
   .search_3:focus{
   outline: none;
   background: #fff; /* Fallback color for non-css3 browsers */
   /* Gradients */
   background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));
   background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);
   }
   /*** SEARCH BUTTON ***/
   .submit_3{
   background: #44921f;/* Fallback color for non-css3 browsers */
   /* Gradients */
   background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));
   background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);
   border: 0;
   color: #eee;
   cursor: pointer;
   float: right;
   font: 16px 'Raleway', sans-serif;
   font-weight: bold;
   height: 30px;
   margin: 4px 4px 0;
   text-shadow: 0 -1px 0 rgba(0,0,0,.3);
   width: 84px;
   outline: none;
   /* Rounded Corners */
   border-radius: 30px;
   -webkit-border-radius: 30px;
   -moz-border-radius: 30px;
   /* Shadows */
   box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
   -moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
   -webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
   }
   /*** SEARCH BUTTON HOVER ***/
   .submit_3:hover {
   background: #4ea923; /* Fallback color for non-css3 browsers */
   /* Gradients */
   background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
   background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
   }
   .submit_3:active {
   background: #4ea923; /* Fallback color for non-css3 browsers */
   /* Gradients */
   background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
   background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
   }
</style>
<body>
   <!-- search form 3 -->
   <form id="search-form_3">
      <input type="text" class="search_3"/>
      <input type="submit" class="submit_3" value="Search" />
   </form>
</body>
</html>

In Listing 9, we have created a simple form with search box including. In the style tags we added some CSS in order to obtain second type of search box. For this purpose we created two class selectors and one #id selector. The properties of #id selector are applied to form. In class selectors, .search_3 class properties are applied to text box. “.search_3:focus”, is used to focus on text box. “.Submit_3”class selector properties are applied on search button.

As we know the “:hover” selector is used to select elements when you mouse over them. For using this property we used “.submit:hover”.

Also we know that “:active” selector is used to select and style the active link. A link becomes active when you click on it. So when you click a link its color will change and for this purpose“.submit_3:active” is used.

Note: Comments are added in code for understanding purpose and in fact it will help you a lot.

Running the code you will see a search box with a different styling as shown in Figure 7.

Figure 7: Second type of stylish search box.

Third type of search box using CSS.

Finally to get type 3, we will create a simple form again and will add some CSS, as shown in Listing 10.

Listing 10: Code to obtain our third type of stylish search box.

<!DOCTYPE html>
<head>
   <title>Design search Button</title>
</head>
<style type="text/css">
   /* search box */
   .button_box2 {
   margin:100px auto;
   }
   /*-------------------------------------*/
   .cf:before, .cf:after{
   content:"";
   display:table;
   }
   .cf:after{
   clear:both;
   }
   .cf{
   zoom:1;
   }
   /*-------------------------------------*/
   .form-wrapper-2 {
   width: 330px;
   padding: 15px;
   background: #555;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   -moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
   -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
   box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
   }
   .form-wrapper-2 input {
   width: 210px;
   height: 20px;
   padding: 10px 5px;
   float: left;
   font: bold 15px 'Raleway', sans-serif;
   border: 0;
   background: #eee;
   -moz-border-radius: 3px 0 0 3px;
   -webkit-border-radius: 3px 0 0 3px;
   border-radius: 3px 0 0 3px;
   }
   .form-wrapper-2 input:focus {
   outline: 0;
   background: #fff;
   -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
   -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
   box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
   }
   .form-wrapper-2 input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
   }
   .form-wrapper-2 input:-moz-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
   }
   .form-wrapper-2 input:-ms-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
   }
   .form-wrapper-2 button {
   overflow: visible;
   position: relative;
   float: right;
   border: 0;
   padding: 0;
   cursor: pointer;
   height: 40px;
   width: 110px;
   font: bold 15px/40px 'Raleway', sans-serif;
   color: #fff;
   text-transform: uppercase;
   background: #D88F3C;
   -moz-border-radius: 0 3px 3px 0;
   -webkit-border-radius: 0 3px 3px 0;
   border-radius: 0 3px 3px 0;
   text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
   }
   .form-wrapper-2 button:hover{
   background: #FA8807;
   }
   .form-wrapper-2 button:active,
   .form-wrapper-2 button:focus{
   background: #c42f2f;
   }
   .form-wrapper-2 button:before {
   content: '';
   position: absolute;
   border-width: 8px 8px 8px 0;
   border-style: solid solid solid none;
   border-color: transparent #D88F3C transparent;
   top: 12px;
   left: -6px;
   }
   .form-wrapper-2 button:hover:before{
   border-right-color: #FA8807;
   }
   .form-wrapper-2 button:focus:before{
   border-right-color: #c42f2f;
   }
   .form-wrapper-2 button::-moz-focus-inner {
   border: 0;
   padding: 0;
   }
</style>
<body>
   <!-- search form 6 -->
   <div class="button_box2">
      <form class="form-wrapper-2 cf">
         <input type="text" placeholder="Search here..." required>
         <button type="submit">Search</button>
      </form>
   </div>
</body>
</html>

In order to make our third type of search box, first of all we will create a simple search box and then we will add CSS styling. In CSS the float property specifies whether or not an element should float and clear property is used to control the behavior of floating elements. Here the “:before” pseudo-element prevents top-margin collapse and the “:after” pseudo-element is used to clear the floats. It’s a pretty nifty solution that uses a lot less code than other notable cross-browser friendly attempts.

Now let’s move to the concept of wrapper which is also used in our code. A wrapper is an element, commonly a div, that encloses one or more other elements in the HTML markup. For example in Listing 11.

Listing 11: Code for understanding concept of wrapper.

<div id="wrap">
<h1>Headline</h1>
<p>Paragraph</p>
<p>Paragraph</p>
</div>

The purposes of wrappers are several, including:

  • To group elements semantically, for instance to separate page heading from body text from sidebar from footer.
  • To group elements cosmetically, such as with a surrounding border or a common background image or color.
  • To group elements in layout, such as to keep them all in the same column when columns are floated next to one another.
  • To enable special positioning, as when a wrapper is given relative positioning in order to contain child elements with absolute positioning.
  • To make it more convenient to specify elements in CSS and JavaScript by referring to their parent, without having to id or class each child element, as shown in Listing 10.

We haven’t created any class or id further, just we used the wrapper as a parent and applied various properties to its child’s. Running code will show the output as shown in Figure 8.

Figure 8: Third type of stylish search box.

Conclusion

In this tutorial we have learned different concepts related to CSS some of which are explained at start of article while rest are explained when there was a need felt for it. We have learned about padding, box sizing, margin, place holder, clearfix and wrapper properties of CSS, along with implementation. Hope you will understand it.

Links

W3school can be followed for various concepts of CSS. You can follow it at

www.w3schools.com.

For viewing programmer concepts on topics like clearfix, wrapper etc stackoverflow can be followed. You can follow it at

www.stackoverflow.com.



Software developer doing B.E in Computer Science at Hamdard university karachi. Have good skills in php, html, javascript and css.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login