Was ist das CSS-Geheimnis des Google-Suchfelds?

Question

Ich untersuche die CSS-Methoden, die Google zum Erstellen seiner Benutzeroberfläche verwendet.Mir ist aufgefallen, dass der CSS-Code auf ihrer Homepage keinen Verweis auf ihr Suchfeld enthält.Es scheint nur ein nacktes Eingabe-Tag zu sein, ohne Rahmen, Hintergrundbild oder irgendeine der Konventionen, die normalerweise zur Stilisierung eines Rahmens verwendet werden.Und doch kann es nicht nur einen Farbton und eine Art Farbverlauf darstellen, sondern ist auch leicht rund und reagiert auch auf den Cursorfokus.

Deine Vermutung ist also genauso gut wie meine.Bitte benutzen Sie Ihren Firebug, um es auszuprobieren und mir zu helfen, diesem Rätsel auf den Grund zu gehen.

http://www.google.com/

BEARBEITEN:Um es klarzustellen: Ich versuche nicht, ein ästhetisches Urteil zu fällen.Obwohl ich den Minimalismus der Google-Startseite fantastisch finde, bin ich wirklich daran interessiert herauszufinden, welche Techniken sie verwendet haben, um die Ränder um ihr Suchfeld herum zu stilisieren – ohne jegliches CSS zu verwenden.

Answer 1

Verwenden Sie einen Mac? Sind Runde nicht alle nativen UI-Elemente, glühen, und die Farbe wechseln?

Haben Sie Add-ons wie die Google Toolbar, die die Benutzeroberfläche der Seite werden modifizieren könnten, ohne dass Sie es zu erkennen in der Lage?

Edit: Die Technik in der Frage wirklich nichts mit CSS und alles zu tun, hat gefragt, mit dem Browser zu tun. Die Texteingabe auf der Google-Homepage hat keinen CSS-Stil angewandt und wird daher an den Browser überlassen, zu entscheiden, wie es aussieht. Hier ist, wie es aussieht, wenn das Feld in Google Chrome Fokus hat:

entfernt tot Images Link

Answer 2

Kein Geheimnis. Es ist ein normales Textfeld ... Google-Homepage ist schon immer berühmt minimalistisch gewesen.

Answer 3

Ich bin mir über ihre Homepage nicht sicher, aber sie machen dasselbe in Gmail, und da ist CSS im Spiel:

.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

Es ist alles über Chrome, es eine äußere Schein-Effekt gilt, wenn Sie auf einem beliebigen Textfeld mit diesem Browser konzentrieren.

Answer 5

Nun, da der einige Browser wie Firefox können css3 lesen u dass verwenden Eckenradius zu haben, im es jetzt mit! obwohl seine nicht gültig von w3c noch.

Answer 6

Es sieht nicht wie sie das Suchfeld werden stilisieren. Aber wenn sie wollten könnten sie verwenden nur die native HTML-Tag input. Sie müssen es nur in der CSS-Datei verweisen.

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

Dies würde decken nur das Suchfeld Feld. Wenn Sie benötigen, um die Taste zu decken, fügen Sie einfach eine Klasse zu Ihrem Tasten-Eingabefeld.

ich immer verwenden .btn

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

Nun sollten diese geben Ihnen die vollständige Kontrolle über all input Feld auf Ihnen gesamte Website.