不使用标签进行单选按钮样式设置

Question

我现在面临这个问题：我想要为系统生成的没有标签的单选按钮和复选框添加样式。

我正在使用IBM SPSS数据收集制作在线调查，这意味着它会根据一些我可以样式化的模板将所有问题生成到页面上（主要使用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;
}

我的问题是：

• 是否有一种方法可以在没有标签的情况下重新样式化单选按钮和复选框？

或者

• 是否有一种方法可以使用JavaScript或其他东西在生成的页面上为每个单选按钮或复选框添加虚假的空白标签？

或者

• 是否有其他方法可以解决这个问题，而不需要编辑生成的页面代码，例如我可以使用生成的页面吗？

如果我没有包含任何必要的信息，请询问，如果我能提供，我会提供它们。

非常感谢您的任何帮助！

问候,

Peter

- user3405427

---

我也想附上屏幕截图，展示它的外观。请在您的问题中留下图片链接。 - Gaurang Tandon

Answer 1

如果要为没有标签的单选按钮进行纯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;
}

- B. Symons

Answer 2

---

无法使用纯CSS样式化单选按钮，但可以通过CSS和JavaScript混合来实现，将假图像定位在单选按钮上方并将单选按钮显示为none即可。一开始，要做到这一点，是否有标签并不重要。如果您不想编写自己的脚本，有几个插件可以实现此功能：

- http://www.hongkiat.com/blog/css3-checkbox-radio/ - http://www.csscheckbox.com/radio-buttons.php - 即使我有自己的插件：http://albertofortes.com/projects/piscoPrettyForms/ 在我的插件中，您不需要标签来样式化单选按钮，虽然有一个标签，但它不用于样式化，因此您可以将其删除并仍然可以正常工作。

请参见使用检查器工具编辑的此代码：

- Alberto Fortes

---

这个回答似乎没有解决你的主要问题——没有可用的标签元素。你是如何解决这个问题的？ - Scott B

Scott的真正问题是样式化单选按钮，仅此而已。他发现的问题是所有教程都需要标签来进行样式化。但实际上，标签并不是必要的，你可以在我的插件中看到标签没有用于样式化，因此你可以删除标签并保留自定义样式。事实上，他在上面评论说这解决了他的问题。所以我认为这个问题已经解决了 ;)PS：也许你的否定标点符号有点过了？ - Alberto Fortes