
> TOOLINFY CODES FOR TUTORIAL: White flat search form styling with CSS --> URL: http://www.toolinfy.com/flat-search-form-styling-css
> ==================================================================================================================================

> HTML CODE:

<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 CODE:

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;}

> ==================================================================================================================================

> Enjoy! -> http://www.toolinfy.com





