Qual é o segredo CSS da caixa de pesquisa do Google?

Question

Estou estudando os métodos css Google usa para criar seu ui. Percebi que o código css em sua home page não contém qualquer referência à sua caixa de pesquisa; Parece que foi uma marca de entrada nu, com não uma borda, imagem de fundo ou qualquer das convenções normalmente utilizadas para estilizar uma fronteira. E ainda assim ele pode exibir não apenas um tom e uma espécie de inclinação, mas é ligeiramente rodada e também reage ao foco cursor.

Assim, seu palpite é tão bom quanto o meu. Utilize o seu Firebug para verificá-la e me ajude a chegar ao fundo deste enigma.

http://www.google.com/

EDIT: Só para ficar claro, eu não estou tentando fazer um julgamento estético. Embora eu acho que o minimalismo da página inicial do Google é fantástico, estou realmente interessado em descobrir as técnicas que eles usaram para estilizar as bordas em torno de sua caixa de pesquisa - sem usar qualquer css qualquer

.

Answer 1

Você está usando um mac? Não são todos os elementos de interface nativos rodada, brilho, e mudam de cor?

Você tem add-ons como o Google Toolbar, que poderia ser modificar a interface do usuário da página sem você ser capaz de detectá-lo?

Edit: A técnica perguntado sobre na questão realmente não tem nada a ver com CSS e tudo a ver com o navegador. A entrada de texto na página inicial do Google não tem estilo CSS aplicadas a ele e, portanto, é deixada para o navegador para decidir como parece. Aqui está o que parece que quando o campo tem o foco no Google Chrome:

removido ligação ImageShack mortos

Answer 2

Nenhum segredo. É uma caixa de texto normal ... home page do Google sempre foi famosa minimalista.

Answer 3

não tem certeza sobre a sua home page, mas eles fazem o mesmo no Gmail, e não há CSS envolvidos:

.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

É tudo sobre Chrome, aplica-se um efeito de brilho externo quando você se concentrar em qualquer caixa de texto com este browser.

Answer 5

Agora que a algum navegador, como o Firefox são capazes de ler css3 u pode usar isso para ter raio de canto, im usando agora! embora não válido pela W3C ainda.

Answer 6

Ele não olha como eles estão estilizando caixa de pesquisa. Mas se quisessem eles poderiam simplesmente usar a tag HTML input nativa. Você apenas tem que fazer referência a ela no arquivo CSS.

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

Este seria apenas cobrir a caixa de pesquisa de campo. Se você necessário para cobrir o botão, basta adicionar uma classe para o seu campo de entrada de botão.

Eu sempre uso .btn

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

Agora, isso deve dar-lhe o controle completo sobre qualquer campo input em você site inteiro.