1º CODIGO
<Style>
#searchbox {
anchura: 280px;
background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBFup1zNH5K1jMIajb6VI1vmOTD6wqEIfer9J80NcbFURRoFyiGsIgaChAnqxtgDkI1ppCAdcIaTMgvtYXXKhEjWUFB3SspaBwp1ROcDpmpdEkBAgUSP_W59_qwfCXMondy2JDPB5zH90N/s1600/search-box.png) no-repeat;
}
#searchbox entrada {
esbozo: none;
}
de entrada: enfoque :: - webkit-input-marcador de posición {
colores: transparente;
}
de entrada: foco: -moz-marcador de posición {
colores: transparente;
}
de entrada: enfoque :: - moz-marcador de posición {
colores: transparente;
}
entrada #searchbox [type = "text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic "AppleGothic", sans-serif;
Fuente- size: 14px;
color: # f2f2f2! important;
padding: 10px 35px 10px 20px;
ancho: 220px;
}
entrada #searchbox [type = "text"]: {foco
de color: #fff;
}
# botón submit {
background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK5IRSavGyMT8_dk5jiz1CVauk8lT2DeodYU42bmmbg0_BUCQVMzjWZTnSvfy3TMclq61WG-kDs4tNKJr4N6_JYuOWgS4hWQ1XO67nuq4hiU1fcW5hOaBpcsqxsEz_NE7TYw6iXCSFrVSv/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
anchura: 40px ;
altura: 50px;
}
# botón de confirmación: hover {
background: id = método "cuadro de búsqueda" = "get" action = "/ búsqueda" autocomplete = "off"> <input name = tipo "q" = "text" size = "15" marcador de posición = "Ingrese su búsqueda here ..." /> <input id = "botón-presentar" type = "submit" value = "" /> </ form>
2º CÓDIGO
<Style>
#searchbox {
anchura: 260px;
}
#searchbox entrada {
esbozo: none;
}
de entrada: enfoque :: - webkit-input-marcador de posición {
colores: transparente;
}
de entrada: foco: -moz-marcador de posición {
colores: transparente;
}
de entrada: enfoque :: - moz-marcador de posición {
colores: transparente;
}
entrada #searchbox [type = "text"] {
background: url (http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/ TyXhIfEIUy4 / S1600 / search-dark.png) no-repeat 13px 10px # f2f2f2;
frontera: 2px solid # f2f2f2;
fuente: 12px negrita Arial, Helvetica, sans-serif;
color: # 6A6F75;
ancho: 190px;
padding: 14px 17px 12px 30px;
-webkit-border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
text-shadow: 0 2px 3px #fff;
-webkit-transición : todos los 0.7s facilidad 0s;
-moz-transición: todos los 0.7s facilidad 0s;
-o-transición: todos los 0.7s facilidad 0s;
transición: todos los 0.7s facilidad 0s;
}
entrada #searchbox [type = "text"]: enfoque {
background: # f7f7f7;
frontera: 2px solid # f7f7f7;
ancho: 200px;
padding-left: 10px;
}
# botón submit {
background: no-repeat;
margin-left: -40px;
border-width: 0px;
anchura: 43px;
altura: 45px;
}
</ style>
<form id = método "cuadro de búsqueda" = acción "obtener" = "/ búsqueda" autocomplete = "off">
<input name = "q" type = "text" size = "15" marcador de posición = "Ingrese su búsqueda here ..." />
tipo <input id = "botón-presentar" = "submit" value = "" />
</ form>