HTML5-Sucheingabe: Kein Hintergrundbild in Chrome?

Question

Ich habe mir die Haare ausgezogen, um Chrome dazu zu bringen, meinen search Eingang mit einem Hintergrundbild zu gestalten. Firefox hat kein Problem, aber ich befürchte, es liegt daran, dass es die Eingabe als normale Texteingabe behandelt. Ist das einfach nicht möglich?

Versuchen Sie dies als Demo:

<input type="search" /> 

​input[type="search"] { 
background: transparent 
    url(http://google.com/intl/en_ALL/images/srpr/logo1w.png) no-repeat 0 0; 
}​​​​​​ 

Wenn es richtig funktioniert, sollte es für die „Suchen“ Eingang als Hintergrundbild setzen Google-Logo (davon oder teilweise). Aber wie Sie sehen werden, wenn Sie dies in Chrome betrachten, funktioniert es nicht. Irgendwelche Ideen oder ist das nur eine der Eigenheiten von HTML5? : \

Answer 1

Wie Sie gesagt haben, Mozilla behandelt Sucheingaben als Text. Bei Webkit-Browsern (Chrome, Safari) wird die Sucheingabe jedoch als vom Client erstellter HTML-Wrapper für das interne Webcore Cocoa NSSearchField formatiert. Dies gibt ihm die runden Kanten und die 'x' Taste, um sich selbst zu löschen, wenn sich Text darin befindet. Leider scheint es, dass diese zusätzlichen Features nicht nur von CSS/JS vorläufig nicht zugänglich sind, sondern es scheint auch, dass es keine W3-Spezifikation dafür gibt, welche CSS-Eigenschaften auf dieses Element und andere neue HTML5-Elemente angewendet werden können. Bis es eine solche Spezifikation gibt, würde ich kein konsistentes Verhalten erwarten.

Answer 2

Sie können erhalten Chrome (und Safari) entlang besser auf einem HTML5-Suchfeld mit Ihrem Stil zu spielen (einschließlich Hintergrundbilder), wenn Sie dies in Ihrem CSS anwenden:

-webkit-Auftritt: none;

Sie können auch -webkit-box-Sizing zu ...

-webkit-box-Sizing ändern möchten: Content-Box;

... da es scheint, dass WebKit dies standardmäßig auf den Wert der Rahmen-Box setzt (im Grunde das alte IE5-Box-Modell).

Seien Sie gewarnt, es gibt immer noch keine (offensichtliche) Möglichkeit, die Position/Darstellung der Feldlöschungsschaltfläche zu beeinflussen. Da nur Webkit diese Schaltfläche generiert, können Sie einige neue browserübergreifende Störungen feststellen .

Answer 3

Die Löschtaste kann mit den folgenden

input[type="search"]::-webkit-search-cancel-button { 

    /* Remove default */ 
    -webkit-appearance: none; 

    /* Now your own custom styles */ 
    height: 10px; 
    width: 10px; 
    background: red; 
    /* Will place small red box on the right of input (positioning carries over) */ 

} 

Styling

input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button, 
input[type="search"]::-webkit-search-results-button, 
input[type="search"]::-webkit-search-results-decoration { 
    display: none; 
} 

http://css-tricks.com/7261-webkit-html5-search-inputs/

Answer 4

Komplettlösung entfernen Sie alle zusätzlichen Design mit entfernt werden kann durch Browser verursacht gestylt werden. Dadurch wird das Suchfeld in ein normales Eingabefeld geändert.

input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button, 
input[type="search"]::-webkit-search-results-button, 
input[type="search"]::-webkit-search-results-decoration { 
    display: none; 
} 
input[type="search"]{ 
    -webkit-appearance: none; 
    -webkit-box-sizing: content-box; 
    outline:none; 
}