White flat search form styling with CSS

06.05.2013 by Ilia Raiskin

HTML CSS Design

In this tutorial you are going to learn how to create a simple, white and flat designed search form with HTML & CSS. Note that we only do the styling in this tutorial.

Download

Demo

Code

HTML

<form class="search-form" action="">
<input type="text" placeholder="placeholder" name="search" class="search-text"/>
<input type="submit" class="search-submit" value=" "/><br style="clear:both;"/>
</form>

CSS


form.search-form input.search-text {
font-size: 130%;
color: #8D8D8D;
-webkit-font-smoothing: antialiased;
font-family: sans-serif;
background-color: #FFF;
display: block;
width: 200px;
height: 20px;
padding: 20px 15px;
border: none;
float: left;
}

form.search-form input.search-submit {
display: block;
height: 60px;
width: 60px;
border: none;
background-color: #FFF;
background-image: url("/Demos/simple-flat-white-search-form/search-icon.png");
float: left;
cursor: pointer;
-webkit-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

form.search-form input.search-submit:hover{
background-image: url("/Demos/simple-flat-white-search-form/search-icon-hover.png");
}

form.search-form {
margin: 10px 0px;
padding: 0;
border: 1px solid #EEE;
width: 290px;
height: auto;
}

form.search-form input.search-text::-webkit-input-placeholder   {
color:#CCCCCC;
-webkit-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

form.search-form input.search-text::-moz-placeholder    {
color:#CCCCCC;
-webkit-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

form.search-form input.search-text::-ms-input-placeholder{
color:#CCCCCC;
-webkit-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

form.search-form input.search-text:focus::-webkit-input-placeholder {color:transparent;}
form.search-form input.search-text:focus::-moz-placeholder {color:transparent;} 
form.search-form input.search-text:focus:-moz-placeholder {color:transparent;}
form.search-form input.search-text:focus::-ms-input-placeholder {color:transparent;}

Explanation

We can style the placeholder of an element with ::placeholder. At the moment you have to use prefixes for Webkit, Mozilla and Microsoft. Note that Mozilla has two different versions, because one has a single semicolon and newer version has two. When a user puts our text-input into focus the placeholder text becomes transparent.

About the author

Ilia Raiskin

Ilia Raiskin is a web designer, web developer, blogger and founder of Toolinfy.com.