{accent-color:色;}でフォームのチェックボックス、ラジオボタン、レンジスライダー、 プログレスバーの色を変えることができます。

【ブラウザ表示】

<form method="POST" action="xxx.cgi">
<p><input type="checkbox" name="seibetsu" value="man" class="sample16">男</p>
<p><input type="radio" name="seibetsu" value="woman" class="sample17">女</p>
<p><input type="range" name="sample" value="50" min="0" max="100" class="sample18"></p>
<p><progress value="50" max="100" class="sample19">50%</progress></p>
</form>

input.sample16{accent-color:navy;}
input.sample17{accent-color:red;}
input.sample18{accent-color:green;}
progress.sample19{accent-color:aqua;}

<form method="POST" action="xxx.cgi">
<p><input type="checkbox" name="seibetsu" value="man" style="accent-color:navy;">男</p>
<p><input type="radio" name="seibetsu" value="woman" style="accent-color:red;">女</p>
<p><input type="range" name="sample" value="50" min="0" max="100" style="accent-color:green;"></p>
<p><progress value="50" max="100" style="accent-color:aqua;">50%</progress></p>
</form>

■ その他の項目

スタイルシート一覧のページに戻る