ラジオボタン初心者です。
ラジオボタンのコードを書いているのですが、丸い部分を直接指でタップしても、ボタンが反応せず、ボタンの右のAAAA,BBBBの文字をタップすると、やっと反応します。ちなみに、マウスでボタンに直接カーソルを合わせるときちんと反応します。
ボタンのサイズと文字のA,Bの位置は変更しないで、ボタンの部分をタップで直接反応させたいです。
html
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="ppp.css"> <style> </style></head><body><form action ="" method ="post" name="doui_form"><div class="radio_text"> <section> <label class="radio_text"> <input type="radio" name="doui" value="suru" checked>AAAA </label> <label class="radio_text"> <input type="radio" name="doui" value="shinai">BBBB </label> </section></div> </form> </body></html>
css
.radio_text{ text-align: center;/* 文字を中央に配置 */ margin-top: 6px;/* ボタンとその横の文字の上の余白 */ margin-bottom: 20px; font-size: 16px; line-height: 1.5;/* ボタンと文字の割れ改善 */ } /*RadioとText*/ label.radio_text { cursor : pointer; position : relative; margin-right : 20px; overflow : hidden; padding-left : 32px; display : inline-block; } label.radio_text:before { position : absolute; width : 16px;/* ボタンのフチの大きさ */ height : 16px; border : 1px solid #40ce03; border-radius : 50%; left : 0px; top : 4px; content : ''; z-index : 3; -webkit-border-radius: 50%; -moz-border-radius: 50%; } label.radio_text:after { content : ''; position : absolute; width : 18px;/* ボタンクリック時の緑の背景の大きさ */ height : 18px; border-radius : 100%; left : 0px; top : 5px; background-color : #40ce03; z-index : 1; -webkit-border-radius: 100%; -moz-border-radius: 100%; } label.radio_text input[type="radio"] { -moz-appearance: none; -webkit-appearance: none; position : absolute; z-index : 2; width : 48px; height : 48px; left : -48px; top : 1px; margin : 0px; box-shadow : 26px -1px #FFF; } label.radio_text input[type="radio"]:checked { box-shadow : none; } label.radio_text input[type="radio"]:focus { opacity : 0.2; box-shadow : 20px -1px #FFF; }
0 コメント