Q&A
リセットCSSを適応すると、ラジオボタンが割れてしまうのですが、（適応しないと割れない）これをリセットCSSはいじらずに、きちんと表示させたいです。
提示コードは以下の順で記載してます。
HTMLのコードはボックスとラジオボタンの骨組みです。
ラジオボタンのCSSはその下
３つ目にRichard ClarkのリセットCSSのコード（書き換えしてない）
ラジオボタンのCSSの.radio_text{
font-size: 16px;を23pxにすると、ボタンの割れは改善されますが、「同意するしない」の文字が大きすぎてしまいます。
これを文字の大きさはそんなに変えずに、ラジオボタンを表示させたいです。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="reset.css"> 7 <meta name="viewport" content="width=device-width,initial-scale=1"> 8 9 <style> 10 11 .wrapper { 12 overflow: hidden; 13 14 } 15 16 </style> 17</head> 18<body> 19 20<div class="wrapper"> 21 22 23 <div class="main"> 24 25 26 </div> 27 <div class="radio_text"> 28 29 <section> 30 <label class="radio_text"> 31 <input type="radio" name="doui" value="suru" checked>同意する 32 </label> 33 <label class="radio_text"> 34 <input type="radio" name="doui" value="shinai">同意しない 35 </label> 36 </section> 37 </div> 38 39</body> 40</html>
ラジオボタンのCSS
css
1 /*スクロール内のボックスの配置*/ 2 .main { 3 4 margin-left: auto; /* ボックスを中央寄せにするため */ 5 margin-right: auto; /* ボックス中央寄せにするため */ 6 } 7 8 9 10 11/*スクロール内のボックスの指定*/ 12.main{ 13 width:650px; 14 height:160px; 15 border: 1.3px solid #40ce03; 16 overflow: auto; 17 color:#40ce03 ; 18 margin-bottom: 20px; 19 margin-top: 17px;/* ボックス内文字上の余白 */ 20 font-size: 14px;/* 文字の大きさ */ 21 padding-left: 10px;/* ボックス内文字左の余白 */ 22 font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','ＭＳ ゴシック',sans-serif; 23 24} 25 26/*スクロールの幅の指定*/ 27.main::-webkit-scrollbar{ 28 width: 14px; 29 height: 10px; 30 31} 32/*スクロールの背景の指定*/ 33.main::-webkit-scrollbar-track 34{ 35 border-radius:5px; 36 border-left: 1px solid #40ce03;/* スクロールバーに接する左の線の表示 */ 37} 38/*スクロールのつまみ部分の指定*/ 39.main::-webkit-scrollbar-thumb 40{ 41 border-radius: 5px; 42 background:#40ce03 ; 43} 44 45 46.radio_text{ 47 text-align: center;/* 文字を中央に配置 */ 48 margin-top: 6px;/* ボタンとその横の文字の上の余白 */ 49 margin-bottom: 20px; 50 font-size: 16px; 51} 52 53 54 55 56 57/*RadioとText*/ 58label.radio_text { 59 cursor : pointer; 60 position : relative; 61 62 margin-right : 20px; 63 overflow : hidden; 64 padding-left : 32px; 65 display : inline-block; 66} 67label.radio_text:before { 68 position : absolute; 69 width : 16px;/* ボタンのフチの大きさ */ 70 height : 16px; 71 border : 1px solid #40ce03; 72 border-radius : 50%; 73 left : 0px; 74 top : 4px; 75 content : ''; 76 z-index : 3; 77} 78label.radio_text:after { 79 content : ''; 80 position : absolute; 81 width : 18px;/* ボタンクリック時の緑の背景の大きさ */ 82 height : 18px; 83 border-radius : 100%; 84 left : 0px; 85 top : 5px; 86 background-color : #40ce03; 87 z-index : 1; 88} 89label.radio_text input[type="radio"] { 90 -moz-appearance: none; 91 -webkit-appearance: none; 92 position : absolute; 93 z-index : 2; 94 width : 48px; 95 height : 48px; 96 left : -48px; 97 top : 1px; 98 margin : 0px; 99 box-shadow : 26px -1px #FFF; 100} 101label.radio_text input[type="radio"]:checked { 102 box-shadow : none; 103} 104label.radio_text input[type="radio"]:focus { 105 opacity : 0.2; 106 box-shadow : 20px -1px #FFF; 107} 108/*ラジオボタンをクリック時フォーカスインジケーター（縦線）が見えているので*/ 109:focus { 110 outline: none; 111}
リセットCSSreset.css
css
1/* 2html5doctor.com Reset Stylesheet 3v1.6.1 4Last Updated: 2010-09-17 5Author: Richard Clark - http://richclarkdesign.com 6Twitter: @rich_clark 7*/ 8 9html, body, div, span, object, iframe, 10h1, h2, h3, h4, h5, h6, p, blockquote, pre, 11abbr, address, cite, code, 12del, dfn, em, img, ins, kbd, q, samp, 13small, strong, sub, sup, var, 14b, i, 15dl, dt, dd, ol, ul, li, 16fieldset, form, label, legend, 17table, caption, tbody, tfoot, thead, tr, th, td, 18article, aside, canvas, details, figcaption, figure, 19footer, header, hgroup, menu, nav, section, summary, 20time, mark, audio, video { 21 margin:0; 22 padding:0; 23 border:0; 24 outline:0; 25 font-size:100%; 26 vertical-align:baseline; 27 background:transparent; 28} 29 30body { 31 line-height:1; 32} 33 34article,aside,details,figcaption,figure, 35footer,header,hgroup,menu,nav,section { 36 display:block; 37} 38 39nav ul { 40 list-style:none; 41} 42 43blockquote, q { 44 quotes:none; 45} 46 47blockquote:before, blockquote:after, 48q:before, q:after { 49 content:''; 50 content:none; 51} 52 53a { 54 margin:0; 55 padding:0; 56 font-size:100%; 57 vertical-align:baseline; 58 background:transparent; 59} 60 61/* change colours to suit your needs */ 62ins { 63 background-color:#ff9; 64 color:#000; 65 text-decoration:none; 66} 67 68/* change colours to suit your needs */ 69mark { 70 background-color:#ff9; 71 color:#000; 72 font-style:italic; 73 font-weight:bold; 74} 75 76del { 77 text-decoration: line-through; 78} 79 80abbr[title], dfn[title] { 81 border-bottom:1px dotted; 82 cursor:help; 83} 84 85table { 86 border-collapse:collapse; 87 border-spacing:0; 88} 89 90/* change border colour to suit your needs */ 91hr { 92 display:block; 93 height:1px; 94 border:0; 95 border-top:1px solid #cccccc; 96 margin:1em 0; 97 padding:0; 98} 99 100input, select { 101 vertical-align:middle; 102}
回答1件
0
ベストアンサー
css
1 .radio_text { 2 line-height: 1.5; 3 }
としてはどうですか？
投稿2022/06/14 00:53
総合スコア36140
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/06/14 02:29