ラジオボタンの大きさを変更したいです。大きさを変更したくて、ラジオボタンのｃｓｓの数値（付属画像にあ

解決済

質問者：pjdmgam
質問日時：2021/04/26 14:19
回答数：1件

ラジオボタンの大きさを変更したいです。大きさを変更したくて、ラジオボタンのｃｓｓの数値（付属画像にあるコード）１５ｐｘから２４ｐｘに大きさを変更したところ、付属画像にあるような緑色のラジオボタンのようになってしまいました。「ラジオボタンの丸が欠けている」、「選択したときの緑色の背景が小さい」、「文字の位置が不自然」になってしまいました。

付属画像の下にある青いラジオボタンのような感じにしたいです。

ちなみにラジオボタンの大きさは２４ｐｘに変更したら、ボタンが欠けましたが、大きさは丁度良いです。

どうしたらよいでしょうか？

コードは下にあります。回答よろしくお願いいたします。
◎◎◎HTML５のコード

<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<link rel="stylesheet" href="kiyaku.css">

</head>
<body>
<div class="radio_text">

<section>
<label class="radio_text">
<input type="radio" name="doui" value="suru">同意する
</label>
<label class="radio_text">
<input type="radio" name="doui" value="shinai">同意しない
</label>
</section>
</div>

</body>
</html>

◎◎◎ｃｓｓのコード（kiyaku css)

/*RadioとText*/

.radio_text{
text-align: center;
}

label.radio_text {
cursor : pointer;
position : relative;
padding-left : 5px;
margin-right : 20px;
overflow : hidden;
padding-left : 20px;
display : inline-block;

}
label.radio_text:before {
position : absolute;
width : 24px;
height : 24px;
border : 1px solid #63e02d;
border-radius : 50%;
left : 0px;
top : 4px;
content : '';
z-index : 3;
}
label.radio_text:after {
content : '';
position : absolute;
width : 11px;
height : 11px;
border-radius : 100%;
left : 3px;
top : 7px;
background-color : #63e02d;
z-index : 1;
}
label.radio_text input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
position : absolute;
z-index : 2;
width : 20px;
height : 20px;
left : -23px;
top : 1px;
margin : 0px;
box-shadow : 20px -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;
}