CSS3でradioボタン&checkboxにオリジナルデザインを適用する方法(スマートフォン用)

この記事は3年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

こんにちは。daikuharaです。今回は【CSS3でradioボタン、checkboxにオリジナルデザインを適用する方法(スマートフォン用)】です。
 

前回【iPhoneで送信ボタンにオリジナルデザインを適用する方法】で”-webkit-appearance“を使いました。

このプロパティでラジオボタンやチェックボックスのスタイルも同様にキャンセルすることができるので、スマートフォンサイトなどwebkit系だけでOKなら、javascript無しでもオリジナルデザインのフォームが作れてしまいそうです。
ということで、ちょろっと試してみようと思います。
 

他のブラウザにも対応したい場合は、こちらの記事で書いているjQueryを使った方法が使えるかとおもいます。
jQuery 簡単!チェックボックスやラジオボタンを装飾する方法(プラグイン不要)

(その他フォーム関連のTipsまとめ:【フォームの使いやすさやデザイン性を向上させる33の方法】)
  

スタイル指定前
ラジオボタン チェックボックス


これが
 

スタイル指定後
ラジオボタン チェックボックス


こうなります。(Chromeあたりでご覧下さい)
 

CSS
指定したスタイルはこんな感じです。


input[type=”radio”]{
-webkit-appearance: none;
width:15px;
height:15px;
border:2px solid #19283C;
border-radius:15px;
background:transparent;
opacity:0.5;
width:100%;
}
input[type=”radio”]:checked{
background:#19283C;
opacity:1;
}

input[type=”checkbox”]{
-webkit-appearance: none;
width:15px;
height:15px;
border:2px solid #19283C;
border-radius:2px;
background:transparent;
opacity:0.5;
}
input[type=”checkbox”]:checked{
background:#19283C;
opacity:1;
}

ちなみにこのプロパティを使えば、ラジオボタンなのにチェックボックスの見た目、なんてことも可能です。使い時は分からないですが。。