¿Cuál es el secreto CSS del cuadro de búsqueda de Google?

Question

Estoy estudiando los métodos css Google utiliza para crear su interfaz de usuario. Me di cuenta de que el código CSS en su página principal contiene ninguna referencia a su cuadro de búsqueda; parece que fue una etiqueta de entrada desnuda, sin una imagen de fondo de la frontera, o cualquiera de las convenciones utilizadas normalmente para estilizar una frontera. Y sin embargo, puede mostrar no sólo un matiz y una especie de gradiente, pero es un poco redonda y también reacciona con el foco del cursor.

Por lo tanto, su conjetura es tan buena como la mía. Por favor utilice su Firebug para comprobarlo y me ayude a llegar al fondo de este enigma.

http://www.google.com/

EDIT: Para que quede claro, no estoy tratando de hacer un juicio estético. Aunque creo que el minimalismo de la página principal de Google es fantástico, estoy muy interesado en saber las técnicas que utilizan para estilizar los bordes alrededor de su cuadro de búsqueda - sin utilizar ningún CSS en absoluto

.

Answer 1

¿Está utilizando un mac? No son todos los elementos de la interfaz nativa redonda, brillo, y el cambio de color?

¿Tiene alguna complementos como la barra Google que podría ser la modificación de la interfaz de usuario de la página sin que seas capaz de detectarlo?

Edit: La técnica se le preguntó acerca de la pregunta realmente no tiene nada que ver con CSS y todo lo relacionado con el navegador. La introducción de texto en la página principal de Google no tiene estilo CSS que se le aplica y por lo tanto se deja al navegador decidir cómo se ve. Esto es lo que se ve cuando el campo se centrará en Google Chrome:

eliminado enlace ImageShack muertos

Answer 2

No hay secreto. Es un cuadro de texto normal ... la página de inicio de Google ha sido siempre famosa minimalista.

Answer 3

no está seguro acerca de su página de inicio, pero lo hacen de la misma en Gmail, y hay CSS involucrados:

.mFwySd:focus
{
border:2px solid #73A6FF !important; 
margin:0 !important;
outline-color:-moz-use-text-color !important; 
outline-style:none !important; 
outline-width:0 !important; 
}

.mFwySd {
background-color:#FFFFFF;
border-color:#666666 #CCCCCC #CCCCCC;
border-style:solid;
border-width:1px;
color:#000000;
}

Answer 4

Se trata de Chrome, se aplica un efecto de resplandor exterior cuando uno se concentra en cualquier cuadro de texto con este navegador.

Answer 5

Ahora que el alguna navegador como Firefox son capaces de leer CSS3 u puede utilizar eso para tener radio de esquina, im usando ahora! aunque no es válida por el W3C todavía.

Answer 6

No se ve como que están estilizar el cuadro de búsqueda. Pero si querían podían sólo tiene que utilizar el nativo input etiqueta HTML. Sólo hay que hacer referencia a ella en el archivo CSS.

input {
     padding:???;
     margin:???;
     background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0;
     color:#??????;
     text-align:????;
     font:normal ?em/?em arial;
}

Esto simplemente cubrir el cuadro de campo de búsqueda. Si usted necesita para cubrir el botón, basta con añadir una clase a su campo de entrada de botón.

Yo siempre uso .btn

input.btn {
     padding:???;
     margin:???;
     background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0;
     color:#??????;
     text-align:????;
     font:normal ?em/?em arial;
}

Ahora esto debe darle el control completo sobre cualquier campo input en que todo el sitio web.