Q&A
input[type="radio"]:checked
の擬似クラスを使用してみてはいかがでしょうか
### 実現したいこと
ラジオボタンでチェック時の色だけを変えたいです。
発生している問題・分からないこと
調べたところ、accent-colorを設定すると色のみ変えられることは分かったのですが、なぜかチェック時に周りの枠が黒くなってしまいます。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <meta name="discription" content=""> 7 <meta name="viewport" content="width=device-width,initial-scale=1"> 8 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"/> 9 <link rel="stylesheet" href="style.css"> 10 </head> 11 <body> 12 <header></header> 13 <main> 14 <form> 15 <input type="radio" name="pay" value="month" id="month"> 16 <label for="month">¥300/<span class="btn__sm">月</span></label><br> 17 <input type="radio" name="pay" value="year" id="year"> 18 <label for="year">¥3300/<span class="btn__sm">年</span></label> 19 </form> 20 </main> 21 </body> 22</html>
CSS
1@charset "UTF-8"; 2 3/* ===================== 4 5共通部分 6 7=========================*/ 8 9html { 10 font-size: 100%; 11} 12 13a { 14 text-decoration: none; 15} 16 17a:visited { 18 color: black; 19} 20 21img { 22 max-width: 100%; 23} 24 25input[type="radio"] { 26 accent-color: #FF9A00; 27 inline-size: 1rem; 28 block-size: 1rem; 29 margin-left: 5px; 30} 31
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
検索してもよく分からず、もともとのcssが邪魔しているのだと思い、リセットcssをCDNで読み込んだりしても解決しませんでした。
補足
特になし
コメントありがとうございます。
.main__top input[type="radio"]:checked {
accent-color: #FF9A00;
inline-size: 1rem;
block-size: 1rem;
margin-left: 5px;
}
のように修正してみましたが、添付のような状態は変わらずでした。
試した結果を質問に追記しました。
回答1件
0
ベストアンサー
以下のようにするとどうですか？
css
1 input[type="radio"]:checked { 2 appearance: none; 3 background-color: #FF9A00; 4 border-radius: 50%; 5 }
投稿2024/01/22 05:10
総合スコア37468
あなたの回答
tips
プレビュー
