Qual è il segreto CSS della casella di ricerca di Google?

Question

sto studiando i metodi CSS utilizzati da Google per creare il loro ui. Mi sono reso conto che il codice css sulla loro home page non contiene alcun riferimento alla loro casella di ricerca; Sembra solo un tag input nuda, con non un bordo, immagine di sfondo o una qualsiasi delle convenzioni normalmente utilizzati per stilizzare un bordo. E tuttavia può visualizzare non solo un colore e una sorta di gradiente, ma è leggermente rotondo e reagisce al focus cursore anche.

Quindi, il tuo indovinare è buono come il mio. Si prega di utilizzare il vostro Firebug di check it out e aiutarmi a fondo di questo enigma.

http://www.google.com/

EDIT: Giusto per essere chiari, non sto cercando di fare un giudizio estetico. Anche se credo che il minimalismo della home page di Google è fantastico, sono davvero interessato a scoprire le tecniche hanno usato per stilizzare i bordi intorno loro casella di ricerca - senza l'uso di alcun tipo css

.

Answer 1

Si sta utilizzando un Mac? non sono tutti gli elementi dell'interfaccia utente nativa rotonda, bagliore, e il cambiamento di colore?

Avete qualche add-on come la Google Toolbar che potrebbe essere modificando l'interfaccia utente della pagina senza che tu sia in grado di rilevarla?

Modifica: La tecnica chiesto in questione ha davvero nulla a che fare con i CSS e tutto a che fare con il browser. L'immissione di testo nella home page di Google non ha stile CSS applicato ad esso ed è quindi lasciata al browser per decidere come appare. Ecco come si presenta quando il campo si è messa a fuoco in Google Chrome:

rimosso morti collegamento ImageShack

Answer 2

Nessun segreto. Si tratta di una casella di testo normale ... home page di Google è sempre stato notoriamente minimalista.

Answer 3

Non sono sicuro circa la loro home page, ma lo fanno lo stesso in Gmail, e non c'è CSS coinvolti:

.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

Si tratta solo di Chrome, si applica un effetto bagliore esterno quando ci si concentra su una casella di testo con questo browser.

Answer 5

Ora che il alcuni browser come Firefox sono in grado di leggere CSS3 u possibile utilizzare che per avere raggio d'angolo, im utilizzando ora! anche se la sua non è valida dal W3C ancora.

Answer 6

Non sembra come stanno stilizzare la casella di ricerca. Ma se volevano potevano solo usare il nativo tag HTML input. Non vi resta che farvi riferimento nel file CSS.

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

Questo sarebbe solo coprire la casella di campo di ricerca. Se hai bisogno di coprire il pulsante, è sufficiente aggiungere una classe al vostro campo di input pulsante.

Io uso sempre .btn

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

Ora questo dovrebbe darvi il controllo completo su qualsiasi campo input su di voi tutto il sito.