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: 6px 5px;
}
.ui-radio+label{
background:green;
padding: 7px 60px;
}
.ui-radio:checked+label{
background:yellow;
padding: 7px 60px;
}
-->
</style>
<div>
<h1>Radioボタン</h1>
<input type="radio" id="female" class="ui-radio" name="sex" style="display: none;" value="女性"/>
<label for="female">女</label>
<input type="radio" id="male" class="ui-radio" name="sex" style="display: none;" value="男性"/>
<label for="male">男</label>
</div>
</html>
表示例
