CSSでラジオボタンの表示形式変更
デフォルトのラジオボタンの表示形式を変更させる際、style="display: none;"を設定したうえ、デフォルトのラジオボタンの表示形式を無効にして、
表示したい形式のCSSを指定すれば、表示形式が変えられます。
※具体的には下記の例をご参照ください。
<html><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("#female").click(function(){alert($("#female").val());});$("#male").click(function(){alert($("#male").val());});});</script><style type="text/css"><!--.ui-radio{padding:6px5px;}.ui-radio+label{background:green;padding:7px60px;}.ui-radio:checked+label{background:yellow;padding:7px60px;}--></style><div><h1>Radioボタン</h1><inputtype="radio"id="female"class="ui-radio"name="sex"style="display: none;"value="女性"/><labelfor="female">女</label><inputtype="radio"id="male"class="ui-radio"name="sex"style="display: none;"value="男性"/><labelfor="male">男</label></div></html>
