CSSのみで<select>
ドロップダウンのスタイルを設定する方法はありますか?
JavaScriptを使わずに、<select>
のフォームにできるだけスタイルを与えたいと思っています。CSSではどのようなプロパティを使えばよいのでしょうか?
このコードは、すべての主要なブラウザと互換性がある必要があります。
JavaScriptで作れるのは知っている。例.
簡単なスタイリングのことではありません。私が知りたいのは、CSSだけでできる最善の方法は何かということです。
Stack Overflowで類似の質問を見つけました。
また、Doctype.comではこの質問を見つけました。
select要素とそのドロップダウン機能は、スタイリングが難しいと言われています。
Chris Heilmann氏による style attributes for select element は、Ryan Dohery氏が最初の回答のコメントで述べたことを確認しています。
select要素はオペレーティングシステムの一部であり ブラウザのクロームではなく、オペレーティングシステムの一部です。そのため、スタイリングには非常に スタイルは非常に信頼性が低く、いずれにしても試すことは必ずしも意味がありません。 とにかく、やっても意味がない。"
例となる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):
/* All select elements on page */
select {
position: relative;
}
/* Style by class. Effects the text of the contained options. */
.blueText {
color: #0000FF;
}
/* Style by id. Effects position of the select drop down. */
#styledSelect {
left: 100px;
}
はい。 HTML要素のタグ名でスタイルを設定することができます。
select {
font-weight: bold;
}
もちろん、他の要素と同様に、CSSクラスを使ってスタイルを設定することもできます。
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>