web-dev-qa-db-ja.com

HTML選択ドロップダウンのオプション値のスタイル設定がChrome＆Safariで機能しない

HTMLドロップダウンリストのオプション値のインラインCSSスタイルは、ChromeおよびSafariでは機能しませんが、FirefoxおよびIEでは機能するようです。

HTMLコードの抜粋：

<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>
htmlcsshtml-select
8
user1483059

colorスタイルは、現在のバージョンのChrome、Safari、Firefox、IE、Operaを搭載したWindows 7の<option>要素、およびFirefoxを搭載したMacで正常に機能します。 ChromeおよびSafariのMacでは何もしないようです。私にはバグのようです。

17
user2183078

短い答え-Webkitベースのブラウザーではそれはできません。つまり約padding見てください ここ

あなたの問題を克服するには、<select>リストへ<ul>とスタイル '<li>アイテム。それは保証されたすべてのブラウザで動作します。

7
Zoltan Toth

これを使ってみてください

select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
}
1
subindas pm

それを試してみてください

<!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>

次のように表示されます。 http://www.w3schools.com/tags/att_option_value.asp

0
Willian Yamashita

paddingの回避策を探している場合：

  • 上と下にはheightを使用できます。
  • ために padding-leftを使用できますtext-indent。

CSS：

select {
    height: 45px;
    text-indent: 5px;
}

selectドロップダウンを本当に使用する必要がある場合は、他のユーザーの提案に従ってulおよびli要素を使用できます。

0
Anil Singh