select optionのcss装飾を継承

select optionの装飾を選択後も継承する事は出来ないでしょうか？
選択するとノーマル表示になってしまうので、選択後もstyleの指定が継承させる事は出来ないでしょうか？

<select>
<option value="">select</option>
<option value="" style="color:yellow;background:black;">select 1</option>
<option value="" style="color:blue;font-size:20px;">select 2</option>
<option value="" style="color:red;">select 3</option>
</select>

アドバイスよろしくお願いします。

行動規範の内容に同意します

回答3件

ベストアンサー

プルダウン展開時のスタイルは option、閉じた時のスタイルは select依存なので、
Z-TALBOさんの考え方で解決すると思います。

手法としては、JavaScriptとCSS合わせれば可能かと思います。

単純な処理としては、
0. selectの選択が変わったのを感知
0. 現在選択しているoptionのstyle値を取得。
0. 2で取得したstyle値をselectにセット（値がない場合はstyle削除）

参考ソースを貼っておきますので検証してみてください。

HTML
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4<meta charset="utf-8">
5<title>sample</title>
6
7<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
8<script>
9$(function () {
10	$('#hoge').change(function() {
11		var setStyle = $('#hoge option:selected').attr('style');
12		if(setStyle) {
13			$(this).attr('style',setStyle);
14		} else {
15			$(this).removeAttr('style');
16		}
17	});
18});
19</script>
20
21</head>
22<body>
23<select id="hoge">
24	<option value="">select</option>
25	<option value="" style="color:yellow;background:black;">select 1</option>
26	<option value="" style="color:blue;font-size:20px;">select 2</option>
27	<option value="" style="color:red;">select 3</option>
28</select>
29</body>
30</html>

投稿2017/05/23 02:02

iss

総合スコア506

sizuchan

2017/05/23 05:19

回答ありがとうございました。動作はイメージ通りでした。ただやはり外部ファイル、jQueryは必要なのですね。ローカルで試すにはjsをダウンロードして試さないとだめですか？

iss

2017/05/23 05:42

インターネットにつながっていない環境であれば、jsをダウンロードして読み込み箇所の記述を <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> ↓ <script src="js/jquery-3.2.1.min.js"></script> のようにすれば動きますね。 jQueryを使わないのであれば、JavaScriptのDOMエレメントからシコシコ処理を書き直せば動かせると思いますが、必要なコードは倍じゃすまないと思うので、JavaScriptが不得意であればjQueryを使うのがオススメです。

行動規範の内容に同意します

回答ありがとうございました。
jQueryを使わない場合だと、イメージと大分違いますがここまでのようです。

<script>
function changeItem(obj){
    if( obj.value == 0 ){
        obj.style.color = '';
    }else{
        obj.style.color = 'red';
    }
}
</script>
<select onchange="changeItem(this)">
<option value="0">select</option>
<option value="1" style="color:yellow;background:black;">select 1</option>
<option value="2" style="color:blue;font-size:20px;">select 2</option>
<option value="3" style="color:red;">select 3</option>
</select>

投稿2017/05/23 13:30

sizuchan

総合スコア11