combobox - html - セレクトボックス CSS おしゃれ - スタイリングするにはどうすればよいですか <select> CSSのみのドロップダウン?</select>

HTML セレクトボックス / html / css / cross-browser / skinning

<select> ドロップダウンのスタイルを設定するCSSのみの方法はありますか?

Peter Mortensen



Answer #1

例のHTMLファイル(selectExample.html)です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Select Styling</title>
  <link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="cherry">Cherry</option>
</select>
</body>
</html>

CSSファイルの例(selectExample.css)。

/ *ページ上のすべての選択要素* /
select {
  position: relative;
}

/ *クラスごとのスタイル。含まれているオプションのテキストに影響します。* /
.blueText {
  color: #0000FF;
}

/ * IDによるスタイル。選択ドロップダウンの位置に影響します。* /
#styledSelect {
  left: 100px;
}