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

Question

ラジオボタンの大きさを変更したいです。大きさを変更したくて、ラジオボタンのｃｓｓの数値（付属画像にあるコード）１５ｐｘから２４ｐｘに大きさを変更したところ、付属画像にあるような緑色のラジオボタンのようになってしまいました。「ラジオボタンの丸が欠けている」、「選択したときの緑色の背景が小さい」、「文字の位置が不自然」になってしまいました。付属画像の下にある青いラジオボタンのような感じにしたいです。ちなみにラジオボタンの大きさは２４ｐｘに変更したら、ボタンが欠けましたが、大きさは丁度良いです。どうしたらよいでしょうか？コードは下にあります。回答よろしくお願いいたします。 ◎◎◎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; }

zircon3 · Accepted Answer

「ボタンが欠けた」のではなく「ボタンと文字がかぶった」のでしょう。
原因はボタンの高さと幅の数値だけいじり、間隔などの他の値をそのままにしたからでは？

参考まで。

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

「ボタンが欠けた」のではなく「ボタンと文字がかぶった」のでしょう。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング