Question

使用此HTML：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Button - Radios</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#radio" ).buttonset();
  });
  </script>
</head>
<body>

<form>
  <div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1">text 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">text 2</label>
    <input type="radio" id="radio3" name="radio"><label for="radio3">text 3</label>
  </div>
</form>

</body>
</html>

我希望在未选择的无线电标签上有黑色边框，在选定的无线电标签上有红色。

我尝试使用这个CSS：

span.radio input[type="radio"] + label{
    border:1px solid black;
}

span.radio input[type="radio"]:checked + label{
    border:1px solid red;
}

但是我在选择时变成红色问题，任何帮助都会受到赞赏。

感谢

Answer 1

问题是您正在尝试解决span.radio中的输入，这些输入在您的标记中不存在。

在带有一类收音机的范围内，找到无线电类型的输入并为紧邻的标签设置样式＆＃34;。

你的标记没有一类无线电，但是它有一个ID为无线电的div。

按如下方式修改CSS：

span.radio input[type="radio"] + label {

Working Fiddle

Answer 2

您没有span在选择器中使用它，我从您的选择器中删除了span.radio。

请尝试以下操作：

＆＃13;

#radio input[type="radio"] + label{
    border:1px solid black;
}

#radio input[type="radio"]:checked + label{
    border:1px solid red;
}

＆＃13;

<form>
  <div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1">text 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">text 2</label>
    <input type="radio" id="radio3" name="radio"><label for="radio3">text 3</label>
  </div>
</form>

＆＃13;

所选无线电标签的CSS样式

2 个答案: