javascript - 没有标签的样式单选按钮

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 样式，请尝试以下操作:

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;
}