selectボックスでボックス内に必須マークをつけたい

Question

セレクトボックスのoption内の文字の色を変更したいです。
inputなどはこれで色が変わりますが、selectboxはそうはいきません。
afterタグなども試しましたが、それもダメでした。
他に方法はありますでしょうか？
よろしくお願いいたします。

<div class="job_label"> <select name="job" required"> <option value="" class="hissu">職種を選択してください。<span class="red">*</span></option> <option value="学生">学生</option> <option value="主婦">主婦</option> <option value="フリーター">フリーター</option> <option value="会社員">会社員</option> <option value="その他">その他</option> </select> </div> <style> .red{ color:red; } </style>

Comments

[退会済みユーザー]

http://getbootstrap.com/components/#dropdowns を独自実装するか、bootstrap をベースに作り直すとかはだめなのかな

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

おそらくご要望の処理は難しいですが、普通考えたら
「職種を選択してください。」に必須をつけるのじゃなくて
セレクトボックス自体が必須なんですよね？

<style>
.red{color:red;}
</style>
<select name="job">
<option value="">職種を選択してください。</option>
<option value="学生">学生</option>
<option value="主婦">主婦</option>
<option value="フリーター">フリーター</option>
<option value="会社員">会社員</option>
<option value="その他">その他</option>
</select><span class="red"> *必須</span>
</div>

Comments

[toss]

みなさま回答ありがとうございました！
無事意図していた事が出来ました。

Answer 2

プルダウン（select）の見た目を思い通りにするCSS
こちらを参考に、同じ要領で「*」を配置するというのはどうでしょうか？

マークアップ上selectの中で「」だけをどうこうするというのは難しいと思いますので、label要素を利用して、:after疑似要素などにcontent:"";で表示するのがいいのではないかと思います。