CSS für Suchbox greift nicht

[jschma]

Hallo zusammen,

bin etwas ratlos gerade weil ich das Problem bisher noch nie hatte. Habe die Suchbox im header eingebunden

<div class="mod_search block">
<form action="index.php/suche.html" method="get">
  <div class="formbody">
        <label for="ctrl_keywords_7" class="invisible">Suchbegriffe</label>
     <input type="submit" id="ctrl_submit_7" class="submit" value="Suchen">
     <input type="search" name="keywords" id="ctrl_keywords_7" class="text" value="">
  </div>
</form>
</div> 

Den Submit-Button kann ich wie gewollt stylen, das Input-Field allerdings nicht. Es greift immer nur die width-Angabe. Border, Background, height wird komplett ignoriert.

Ich habe versuch das Element mit input[type="search"], mit .mod_search #ctrl_keywords_7 sowie mit #header .mod_search #ctrl_keywords_7 anzusprechen. Das Ergebnis ist immer das gleiche, das CSS greift nicht (bis auf width).

Ich steh auf dem Schlauch, wo ist mein Fehler? Die Regeln werden auch von keiner anderen Anweisung überschrieben...

Danke für jeden Tipp
jschma

[jschma]

Also, es liegt nicht an meinem CSS, sondern an meinem Browser = Chrome/Iron. In FF funktioniert das styling tadellos.

Lösung:

 -moz-appearance:none;
   -webkit-appearance:none;

Quelle: http://css-tricks.com/webkit-html5-search-inputs/ (Kommentare unten)