Question

我现在面临这个问题：我想要设置单选按钮和复选框由系统生成且没有标签

我正在使用IBM SPSS Data Collection进行在线调查，这意味着它根据我可以设计的一些模板生成所有问题（主要是使用CSS样式）。

我发现很多教程如何使用纯CSS设置单选按钮和复选框的样式，问题是，所有这些都使用标签：<label for="id"></label>。重点是，生成的代码没有<label>。

正如我所说，对象没有标签，例如单个单选按钮由此代码定义（我还想附加截图如何，但我没有足够的声誉点）：

<td id="Cell.2.1" style="text-Align: Center;vertical-align: Middle;background-color: #e6efe6;width: 7%;border-color: Black;border-style: Solid;border-width: 0px;">
  <div></div>
  <input type="radio" name="_QQ3_Qa_QSingleResponseQuestion_C" id="_Q0_Q0_Q0_C1" class="mrSingle" style="font-family: Trebuchet MS;font-size: 9pt;" value="b"></input>
</td>

我尝试更改html代码以添加标签，但它确实有效，但这并不是我需要的。这个解决方案出现的问题是，我不能让系统旋转集成主题（问题），因为页面无法生成但必须明确写入。

当我使用这个解决方案（不适合）时，我可以简单地使用CSS添加单选按钮和复选框，添加如下背景图像：

input[type=radio]:not(old) + label{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 40px;
  background   : url('radio_off.png') no-repeat 0 0;
  background-size:30px 30px;
  line-height  : 35px;
}

input[type=radio]:not(old):checked + label{
  background   : url('/radio_on.png') no-repeat 0 0;
  background-size:29px 29px;
}

所以我的问题是：

有没有办法在没有标签的情况下重新设置单选按钮和复选框？

或

有没有办法使用javacsript或其他东西为生成的页面上的每个单选按钮或复选框添加假空白标签？

或

有没有其他方法可以解决这个问题而无需编辑生成的页面代码，例如我可以使用页面如何生成它？

如果我没有包含任何必要的信息，请求他们，如果我能，我会提供给他们。

非常感谢您的帮助！

此致

彼得

Answer 1

没有办法用纯CSS设置单选按钮的样式，但你可以用CSS和JavaScript混合，在收音机上放置假图像并显示单选按钮一开始，要做到这一点，无论你是否有标签都无所谓。如果你不想制作自己的脚本，有几个插件可以做到这一点：

http://www.hongkiat.com/blog/css3-checkbox-radio/
http://www.csscheckbox.com/radio-buttons.php
即使我自己的插件：http://albertofortes.com/projects/piscoPrettyForms/

在我的插件中，您不需要标签来设置单选按钮的样式，有一个标签，但不能用于样式，因此您可以将其删除并仍然有效。

请参阅使用Inspector工具编辑的代码：

Answer 2

对于不带标签的单选按钮的纯CSS样式，请尝试以下操作：

input[type=radio]:not(old) {
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  border-radius: 1em;
  border: 3px solid #555;
}

input[type=radio]:not(old):checked{
  background-image: radial-gradient(circle at center, #555, #555 37.5%, #fff 40%, #fff 100%);
}

宽度，高度，边框厚度和颜色都可以根据需要设置样式。

也可以使用svg图像，通过以下方式将其用于已检查和未检查状态：

input[type=radio]:not(old) {
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  background-image: url('unchecked.svg') no-repeat;
  background-size: cover;
  background-origin: center;
}

input[type=radio]:not(old):checked{
  background-image: url('checked.svg') no-repeat;
  background-size: cover;
  background-origin: center;
}

造型单选按钮没有标签

2 个答案: