Styling-option-Wert im select-drop-down-html funktioniert nicht in Chrome & Safari

Den css-Stil für die option Wert in das html-drop-down-Liste nicht auf chrome und safari , funktioniert nur auf Firefox und IE.

einige der Codes sind die folgenden:

<option style="color:#4f5652;background:#f0f0ef;hite-space:nowrap;-webkit-appearance:button;text-overflow:ellipsis; padding:5px 4px 3px 4px;border-bottom:1px solid green" value="project">Project</option>
  • noch mehr code und erläutern Sie das problem, Was genau meinst du mit "funktioniert nicht" ?
  • schauen Sie für die url unten auf firefox und chrome und den Unterschied sehen: 64.202.124.112/~cedro/de/ENERGIE-EFFIZIENZ/Intern-Beleuchtung/... (schauen Sie auf das Dropdown-Menü in der rechten : Projekte navigation)
  • white-space statt hite-Raum, aber nicht die Arbeit
InformationsquelleAutor | 2012-09-06
  1. 17

    color Stil funktioniert gut in &lt;option&gt; Elemente auf Windows 7 mit den aktuellen Versionen von Chrome, Safari, Firefox, IE, Opera und Chrome, sowie auf dem Mac mit Firefox; scheint aber ein no-op auf dem Mac mit Chrome und Safari. Scheint ein bug zu mir.

    InformationsquelleAutor user2183078
  2. 7

    Die kurze Antwort - Sie können nicht tun, dass in Webkit-basierten Browsern. I. e. über padding werfen Sie einen Blick hier

    Zur überwindung Ihres Problems können Sie Ihre <select> um eine Liste <ul> und Stil seiner' <li> Elemente. Das funktioniert in jeden browser gewährleistet ist.

    • Danke.das ist eine Idee...
    • Naja... es ist eine Idee... aber wie <li>s ein-und ausblenden auf <ul> klickt... simulieren ja den <select> Verhalten.
    • Sie können einige minimale JS/jQuery für die
    • guten Ratschlag. Das ist das, was ich schließlich auch Tat und ich denke, es hatte einen schönen Blick 🙂
    • Dies ist eine großartige Methode, aber Sie verlieren die Fähigkeit, zu wählen durch Eingabe und tabing zwischen den Feldern.
    • Also im Grunde sieht es aus wie NICHT mit <select> und <option>, aber CSS-basierte dropdown - ist die einzige Möglichkeit, es zu machen, wie zum Beispiel: link

    InformationsquelleAutor Zoltan Toth
  3. 1

    Versuchen Sie bitte, diese

    select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
}
    • Das versteckt den Pfeil aus dem dropdown, so dass die GUI nicht Benutzer-freundlich...
    • Ok, wir können hinzufügen, die Pfeile durch die Verwendung von CSS nach, bevor Immobilie
    InformationsquelleAutor subindas pm
  4. 0

    versuchen Sie es 

    <!DOCTYPE html>
<html>
<body>

<form action="form_action.asp">
Select your favorite car:
<select name="carlist">
  <option style="color:#4f5652;background:#f0f0ef;hite-space:nowrap;-webkit- appearance:button;text-overflow:ellipsis; padding:5px 4px 3px 4px;border-bottom:1px solid green" value="volvo">Volvo XC90</option>
  <option style="color:#4f5652;background:#f0f0ef;hite-space:nowrap;-webkit-appearance:button;text-overflow:ellipsis; padding:5px 4px 3px 4px;border-bottom:1px solid green" value="saab">Saab 95</option>
  <option style="color:#4f5652;background:#f0f0ef;hite-space:nowrap;-webkit-appearance:button;text-overflow:ellipsis; padding:5px 4px 3px 4px;border-bottom:1px solid green" value="mercedes">Mercedes SLK</option>
  <option style="color:#4f5652;background:#f0f0ef;hite-space:nowrap;-webkit-appearance:button;text-overflow:ellipsis; padding:5px 4px 3px 4px;border-bottom:1px solid green" value="audi">Audi TT</option>
</select>
<input type="submit" value="Submit" />
</form>

<p>Choose a car, and click the "Submit" button to send input to the server.</p>

</body>
</html>

    wie wir sehen können, in:
    http://www.w3schools.com/tags/att_option_value.asp

    • Danke. auf den Chrome-Browser, Nur der hintergrund css , nicht die Grenzfrage.
    • Kein Glück auf OSX mit Chrome.
    • Auch unter Windows kein Glück mit Google Chrome.
    InformationsquelleAutor Willian Yamashita
  5. -1

    War ich in der Lage zu replizieren diese in Chrome auf jsfiddle. Sie können die Stile zu select wie diese: http://jsfiddle.net/aaronmacy/3uv8D/

    • ja, ich weiß, aber der Wert der option nicht betroffen von der css!!!
    • Vielleicht bin ich Missverständnis, Sie. Ich habe gerade ein Beispiel auf meine Antwort. Ist es das, was du versuchst zu erreichen?
    • Thank u für deine Wiederholung , ich verstehe dein Beispiel, mein problem war auf den option-tag in der select-tag
    InformationsquelleAutor amacy
Schreibe einen Kommentar