ラジオボタンの丸い部分が反応しません。

ラジオボタン初心者です。

ラジオボタンのコードを書いているのですが、丸い部分を直接指でタップしても、ボタンが反応せず、ボタンの右のAAAA,BBBBの文字をタップすると、やっと反応します。ちなみに、マウスでボタンに直接カーソルを合わせるときちんと反応します。

ボタンのサイズと文字のA,Bの位置は変更しないで、ボタンの部分をタップで直接反応させたいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title></title>
6  <meta name="viewport" content="width=device-width,initial-scale=1">
7  <link rel="stylesheet" href="ppp.css">
8  <style>
9
10
11
12  </style>
13</head>
14<body>
15<form action ="" method ="post" name="doui_form">
16<div class="radio_text">
17
18<section> 
19<label class="radio_text"> 
20<input type="radio" name="doui" value="suru" checked>AAAA
21 </label>
22 <label class="radio_text">
23 <input type="radio" name="doui" value="shinai">BBBB
24 </label> 
25</section>
26</div>
27
28</form> 
29
30</body>
31</html>
32

css
1 .radio_text{
2        text-align: center;/* 文字を中央に配置 */	
3        margin-top: 6px;/* ボタンとその横の文字の上の余白 */
4        margin-bottom: 20px;
5        font-size: 16px;
6        line-height: 1.5;/* ボタンと文字の割れ改善 */
7
8    }
9      
10     
11    
12    
13    
14    /*RadioとText*/
15    label.radio_text {
16        cursor       : pointer;
17        position     : relative;
18        
19        margin-right : 20px;
20        overflow     : hidden;
21        padding-left : 32px;
22        display      : inline-block;
23    }
24    label.radio_text:before {
25        position      : absolute;
26        width         : 16px;/* ボタンのフチの大きさ */	
27        height        : 16px;
28        border        : 1px solid #40ce03;
29        border-radius : 50%;
30        left          : 0px;
31        top           : 4px;
32        content       : '';
33        z-index       : 3;
34        -webkit-border-radius: 50%;
35        -moz-border-radius: 50%;
36
37
38    }
39    label.radio_text:after {
40        content          : '';
41        position         : absolute;
42        width            : 18px;/* ボタンクリック時の緑の背景の大きさ */	
43        height           : 18px;
44        border-radius    : 100%;
45        left             : 0px;
46        top              : 5px;
47        background-color : #40ce03;
48        z-index          : 1;
49        -webkit-border-radius: 100%;
50  -moz-border-radius: 100%;
51    }
52    label.radio_text input[type="radio"] {
53        -moz-appearance: none;
54        -webkit-appearance: none;
55        position   : absolute;
56        z-index    : 2;
57        width      : 48px;
58        height     : 48px;
59        left       : -48px;
60        top        : 1px;
61        margin     : 0px;
62        box-shadow : 26px -1px #FFF;
63    }
64    label.radio_text input[type="radio"]:checked {
65        box-shadow : none;
66    }
67    label.radio_text input[type="radio"]:focus {
68        opacity    : 0.2;
69        box-shadow : 20px -1px #FFF;
70    }

行動規範の内容に同意します

回答2件

自己解決

これで解決しました。

<div class="center333 radiofont"> <div class="clearfix radio midori ko"> <div> <section> <input type="radio" name="doui" value="suru" id="agreeY" checked> <label for="agreeY"><span>同意する</span></label> </section> </div> <div> <section> <input type="radio" name="doui" value="shinai" id="agreeN"> <label for="agreeN"><span>同意しない</span></label> </section> </div> </div> <div class="err_msg" id="agree_err"></div> </div>

ｃｓｓのコード

.radiofont {

  font-size: 0.9em;/*ボタンの丸とその文字の大きさ*/
  font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','ＭＳ ゴシック',sans-serif;

}
.center333 {
text-align: center;

}

.radio {
display: flex;/* ここflexにすると横並に　他のdispleyをflexにしても縦並びのまま */

  justify-content: center;

}

.midori {
color: #40ce03;
}
.ko {
font-weight: bold;
}

input[type="radio"] {
display: none;
}

.radio label{
display: inline-block;
position: relative;
padding-left: 1.7em;
overflow: initial;
cursor: pointer;

}
.radio input:checked ~ label:before {
background: #40ce03;
}
.radio label:before {
content: '';
position: absolute;
line-height: 1;
font-size: 1em;
margin-top: auto;
margin-bottom: auto;
border: thin solid #40ce03;
left: 0em;
top: 0;
bottom: 0;
width: 1em;
height: 1em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;