cool text box design in css

mac style text box design.

by Jay Angelo Valmocina

HTML

<div class="clear">Valid</div>
<input type="text" placeholder="Name" class="cool-one valid">
<div class="clear">Invalid</div>
<input type="text" placeholder="Name" class="cool-one invalid">
<div class="clear">Simple</div>
<input type="text" placeholder="Name" class="simple-input">
<div class="clear">iOS inputs</div>
<input type="text" placeholder="MAC" class="mac">
<div class="clear">Search</div>
<input type="text" placeholder="Search" class="new-search">
<div class="clear">Coffee Cup Search</div>
<div id="nav-search">
    <input type="text" name="query" id="search" class="input-medium search-query" placeholder="Search" style="width: 180px;" />
</div>
<div class="clear">ubuntu Text Box Style</div>
<input type="text" placeholder="ubuntu" class="textubuntu" />
<button class="buttonubuntu">Search</button>
<div class="clear"><a href="http://lesson8.blogspot.in/2012/07/cool-textbox-design-in-html5.html">Cool Style</a>

</div>
<div class="form-wrapper">
    <input type="text" name="search" placeholder="Search..." required>
    <button type="submit">Search</button>
</div>
<div class="clear">Coool one</div>
<form action="#" id="headersearch" role="search">
    <input alt="Search" id="keywords" name="q" placeholder="Enter your search" size="40" type="text">
    <button class="ss-search" id="submitquery" name="sa" type="submit"> <span class="hide">search</span>
    </button>
</form>

CSS

body {
    padding:15px;
    background-image: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/otis_redding.png);
    font-family:"Lato", Calibri, Arial, sans-serif;
}
.clear {
    clear:both;
    padding:5px;
}
/* Valid */
.cool-one {
width: 250px;
border: 1px solid #3D484C;
background: #2D3538;
margin: 0 0 5px;
padding: 8px;
border-radius: 5px;
font-size: 12px;
padding-right: 30px;
color: #DDD;  
}
.valid {
background: #2D3538 url(http://picbox.im/image/cba14e57f0-validicon.png) no-repeat 99% 50%;
background-position: right 6px center;
}
.invalid {
background: #2D3538 url(http://picbox.im/image/a43cdf7011-invalidicon.png) no-repeat 99% 50%;
background-position: right 6px center;
}

/* simple */
 .simple-input {
    display: block;
    padding: 5px;
    border: 4px solid #F1B720;
    border-radius: 5px;
    color: #333;
    transition: all 0.3s ease-out;
}
.simple-input:hover {
    border-radius: 8px
}
.simple-input:focus {
    outline: none;
    border-radius: 8px;
    border-color: #EBD292;
}
/* iOS inputs */
 .mac {
    display: block;
    border: none;
    border-radius: 20px;
    padding: 5px 8px;
    color: #333;
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, .2), 0 0 4px rgba(0, 0, 0, 0.1);
}
.mac:focus {
    outline: none;
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, .2), 0 0 4px rgba(0, 0, 0, 0.1), 0 0 5px 1px #51CBEE;
}
/* search */
 .new-search {
    border: 1px solid #B5C9D4;
    padding: 6px 15px;
    background: #ECF1F4;
    width: 235px;
    font-size: 12px;
    color: #3E7EA0;
    height: 18px;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2), 0px 1px 3px rgba(25, 62, 83, 0.1) inset, 0px 0px 0px 8px rgba(155, 180, 195, 0.3);
}
.new-search:focus {
    outline: none;
}
#nav-search input {
    width: 180px;
    height: 20px;
    padding: 4px 6px;
    font-size: 14px;
   ...