如何访问css中的类型复选框

Question

一般来说，你的健康状况如何？ 优秀的

<label for="q1">Good</label>
<input type="checkbox" id="q1" name="Question 1" value="...">

<label for="q1">Bad</label>
<input type="checkbox" id="q1" name="Question 1" value="...">

<label for="q1">Worse</label>
<input type="checkbox" id="q1" name="Question 1" value="...">

<p class="q">How would you rate our concern for your privacy?</p>
<label for="q2">Outstanding</label>
<input type="checkbox" id="q2" name="Question 2" value="...">
<label for="q2">Good</label>
<input type="checkbox" id="q2" name="Question 2" value="...">

<label for="q2">Adequate</label>
<input type="checkbox" id="q2" name="Question 2" value="...">

<label for="q2">Need improvement</label>
<input type="checkbox" id="q2" name="Question 2" value="...">

<label for="q2">Poor</label>
<input type="checkbox" id="q2" name="Question 2" value="...">

<label for="q2">N/A</label>
<input type="checkbox" id="q2" name="Question 2" value="...">
<p class="q">How often have you visited Medical center in past year?</p>
<label for="q3">First Visit</label>
<input type="checkbox" id="q1" name ="Question 3" value="...">
<label for="q3">2-5 Visits</label>
<input type="checkbox" id="q1" name ="Question 3" value="...">
<label for="q3">More then 5 Visit</label>
<input type="checkbox" id="q1" name ="Question 3" value="...">
</div>          

我在这里读过一些关于这个主题的帖子，但没有一篇对我有用。我想访问每个问题的复选框类型(q类(，以在css中设置它们的样式，从而在字段集的宽度上均匀地间隔选项(复选框(，它们向左浮动。

TIA-

Answer 1

它不是真正需要样式的复选框，顺便说一句，它甚至不是你想要的复选框-它是一个单选项-所以要使用的正确元素是input[type="radio"]…-您需要将每个组包装在包装器中(语义上是fieldset元素(，将问题作为legend元素，并使用flex样式根据包装输入和相关文本的标签元素来平均分配它们(justify-content: space-evenly(。。

请注意，由于每个选项都有不同数量的选项，每个问题/回答组都有不同的宽度。我建议您调整问题结构，使其始终具有相同数量的选项，以便形成统一的布局。

我还将标签文本移动到无线电输入之后-这更常见，也更好，因为lbel文本的长度是可变的，因此无线电输入相对于标签文本处于不同的位置。将其放在标签文本的前面会使其位于每个标签中的单个位置。但这只是我的想法：(

fieldset {
border: none;
margin-bottom: 24px;
display: flex;
justify-content: space-evenly;
padding: 0 16px;
}
legend {
font-weight: bold;
margin-bottom: 8px
}

<fieldset>
<legend class="q">In general what is the quality of your health?</legend>
<label>
<input type="radio" id="q1" name="Question 1" value="good"/>
Good
</label>
<label>
<input type="radio" id="q1" name="Question 1" value="bad"/>
Bad
</label>
<label>
<input type="radio" id="q1" name="Question 1" value="worse" />
Worse
</label>
</fieldset>

<fieldset>
<legend class="q">How would you rate our concern for your privacy?</legend>
<label>
<input type="radio"  name="Question2" value="outstanding"/>
Outstanding
</label>
<label>
<input type="radio" name="Question2" value="good"/>
Good
</label>
<label>
<input type="radio" name="Question2" value="adequate"/>
Adequate
</label>
<label>
<input type="radio"name="Question2" value="needImprovement" />
Need Improvement
</label>
<label>
<input type="radio"name="Question2" value="poor" />
Poor
</label>
<label>
<input type="radio"name="Question2" value="na" />
N/A
</label>
</fieldset>
<fieldset>
<legend class="q">How often have you visited Medical center in past year?</legend>
<label>
<input type="radio"  name="Question3" value="firstVisit"/>
First Visit
</label>
<label>
<input type="radio" name="Question3" value="2to5"/>
2-5 Visits
</label>
<label>
<input type="radio" name="Question3" value="morethan5"/>
More then 5 Visits
</label>
</fieldset>

Answer 2

使用以下代码

input[type='checkbox'] { ... }

参见以下示例

阅读〔这〕2文章它是非常有帮助的