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

2023年2月9日 296次阅读

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

我正在使用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或其他东西为生成的页面上的每个单选按钮或复选框添加假空白标签？

要么

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

如果我没有包含任何必要的信息,请求他们,如果我能够,我会提供他们.

非常感谢您的帮助！

问候,

彼得

最佳答案 没有办法用纯CSS设置单选按钮的样式,但你可以用CSS和JavaScript混合,在收音机上放置一个假图像并显示没有单选按钮

一开始,要做到这一点,无论你是否有标签都无所谓.

如果你不想制作自己的脚本,有几个插件可以做到这一点：

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

在我的插件中,你不需要标签来设置单选按钮的样式,有一个标签,但不用于样式,所以你可以删除它仍然有效.

查看使用Inspector工具编辑的代码：

《javascript – 没有标签的样式单选按钮》

点赞