<center><form method="get" action="/search_dark" id="search_dark">
  <input name="q" type="text" size="30" placeholder="Search Dark Style" />
  </form></center>

<center><form method="get" action="/search_light" id="search_light">
  <input name="q" type="text" size="30" placeholder="Search Light Style"/>
  </form></center>

<center><form method="get" action="/search_darklight" id="search_darklight">
  <input name="q" type="text" size="30" placeholder="Search Dark Light Style"/>
  </form></center>

body {
  background: #555555;}

/*----- Start Dark Background-----*/
#search_dark {
    position: absolute;
    left: 35%;
    top: 15%;
}

#search_dark {
}
#search_dark input[type="text"] {
    background: url(http://i1078.photobucket.com/albums/w498/molenmaulana/search-white_zps878b551d.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #cccccc;
    width:107px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search_dark input[type="text"]:focus {
    width: 150px;
    }
/*----- End Dark Background-----*/

/*----- Start Light Background-----*/
#search_light{
    position: absolute;
    left: 35%;
    top: 45%;
}
#search_light {
}

#search_light input[type="text"] {
    background: url(http://i1078.photobucket.com/albums/w498/molenmaulana/search-white_zps878b551d.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 107px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search_light input[type="text"]:focus {
    width: 150px;
    }
/*----- End Light Background-----*/


/*----- Start Dark Background and Light Hover-----*/
#search_darklight{
    position: absolute;
    left: 35%;
    top: 75%;
}

#search_darklight {
}
#search_darklight input[type="text"] {
    background: url(http://i1078.photobucket.com/albums/w498/molenmaulana/search-white_zps878b551d.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #cccccc;
    width:107px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search_darklight input[type="text"]:focus {
    background: url(http://i1078.photobucket.com/albums/w498/molenmaulana/search-dark_zps465daf17.png) no-repeat 10px 6px #fcfcfc;
    color: #6a6f75;
    width: 150px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }

/*----- End Dark Background and Light Hover-----*/

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.