Question

我在通过CSS编辑单选按钮时遇到了一些麻烦，因为我无法弄清楚如何正确引用它们。我的代码如下：

<div class="wrapper">
<h1 class="testTitle"> Letter Height</h1>

<h2 class="testIns">Press the buttons to make it shorter or taller!</h2>  

<div id="testBox">
<img src="images/testImages/height/heightMid.gif"> 
</div>

<form method="get" action="width.php" class="testAns" id="heightAns">
<input type="radio" name="height" value="short" onchange="ChangeDisplay('short');">Shorter height
<input type="radio" name="height" value="mid" onchange="ChangeDisplay('mid');">Normal height
<input type="radio" name="height" value="tall" onchange="ChangeDisplay('tall');">Taller height
<br>
<h2 class="confirm">Does this look good?  If so, please click the <span class="testSubmit">"Submit"</span> button.</h2>

<span class="submit"><input type="submit"></span>
</form>
</div>

所以单选按钮位于一个名为＆＃34; wrapper＆＃34;的div中，并且在一个带有class =＆＃34; testAns＆＃34;的表单中。和id =＆＃34; heightAns＆＃34;。我希望能够编辑单选按钮和它们周围的文本，但我唯一可以工作的是：

.testAns {code;}

但是这突出了整个表单，而不仅仅是单选按钮。我已经尝试了一些课程和表格等组合，但我似乎无法让它们发挥作用。奇怪的是，提交按钮的CSS工作正常，这是表单，类和ID的一部分。它的工作代码是：

form input[type=submit] {code;}

有人能给我一些见解吗？

Answer 1

大多数浏览器都提供有限的单选按钮样式，因此某些样式可能似乎无法执行任何操作。您在css中捕获无线电输入所需的代码是input[type=radio] {margin: 10px;}

使用input[type=radio]:checked {margin: 5px;}

选中单选按钮后，您可以应用额外或替代样式

Answer 2

将类添加到单选按钮中而不是包装div。

<强> form.html

<form method="get" action="width.php" id="heightAns">
    <input class="testAns" type="radio" name="height" value="short" onchange="ChangeDisplay('short');">Shorter height
    <input class="testAns" type="radio" name="height" value="mid" onchange="ChangeDisplay('mid');">Normal height
    <input class="testAns" type="radio" name="height" value="tall" onchange="ChangeDisplay('tall');">Taller height
    <br>
    <h2 class="confirm">Does this look good?  If so, please click the <span class="testSubmit">"Submit"</span> button.</h2>

    <span class="submit"><input type="submit"></span>
</form>

<强>的style.css

.testAnd {
    css code...
}

Answer 3

您可以使用

input[type=radio] {
    /* some code */
}

如何在CSS中选择单选按钮

3 个答案: