问题描述
我现在面临这个问题:我想为系统生成的没有标签的单选按钮和复选框设置样式.
我正在使用 IBM SPSS Data Collection 进行在线调查，这意味着它会根据我可以设置样式的某些模板(主要是 CSS 样式)生成所有页面问题.
我发现很多教程如何使用纯 CSS 设置单选按钮和复选框的样式，问题是，所有这些都使用标签:<label for="id"></label>.关键是，生成的代码没有 <label>.
正如我所说，对象没有标签，例如单个单选按钮由此代码定义(我还想附上屏幕截图，但我没有足够的声誉点):
我尝试更改 html 代码以添加标签并且它有效，但这并不是我所需要的.此解决方案出现的问题是，我不能让系统轮换集成主题(问题)，因为无法生成页面但必须明确编写.
当我使用这个解决方案(这不是一个合适的解决方案)时，我可以简单地使用 CSS 添加背景图像来重新设置带有标签的单选按钮和复选框:
input[type=radio]:not(old) + label{显示:内联块；左边距:-28px；padding-left : 40px;背景:url('radio_off.png')不重复0 0；背景尺寸:30px 30px；行高:35px；}输入[type=radio]:not(old):checked + label{背景 : url('/radio_on.png') no-repeat 0 0;背景尺寸:29px 29px；}
所以我的问题是:
- 有没有办法在没有标签的情况下重新设置单选按钮和复选框的样式?
或
- 有没有办法使用 javacsript 或其他方法为生成页面上的每个单选按钮或复选框添加假空白标签?
或
- 有没有其他方法可以解决这个问题而无需编辑生成的页面代码，例如我可以使用它是如何生成的页面吗?
如果我没有提供任何必要的信息，请索取，如果可以的话，我会提供.
非常感谢您的帮助！
问候，
彼得
解决方案
没有办法使用纯 CSS 来设置单选按钮的样式，但是您可以使用 CSS 和 JavaScript 混合来实现，在单选按钮上放置一个假图像并不显示单选按钮一开始，要做到这一点，是否有标签并不重要.如果您不想制作自己的脚本，有几个插件可以做到这一点:
I am now facing this problem: I want to style radio buttons and checkboxes that are generated by system and do not have a label.
I am working with IBM SPSS Data Collection for making online surveys, so that means it generates all questions to page according to some template I can style (mostly styling with CSS).
I found out many tutorials how to style radio buttons and checkboxes using pure CSS, problem is, all of them are using label: <label for="id"></label>. Point is, that generaged code does not have <label>.
As I said, objects are without label, and single radio button for example is defined by this code (I wanted also attach screenshot how it looks like, but i do not have enough reputation points):
<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>
I tried to change html code to add label and it worked, but it is not exactly what I need. Problem that occurs with this solution is, I can't let system rotate integrated subjects (questions), because page cannot be generated but have to be explicitly written.
When I used this solution (which is not suitable one), I could simply restyle radio buttons and checkboxes with lable using CSS adding background images like this:
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;
}
So my questions are:
- is there a way to restyle radio buttons and checkboxes without lable?
or
- is there a way to add fake blank lable to every radio button or checkbox on generated page using javacsript or something other?
or
- is there any other way I could solve this without need edit generated page code e.g. I can use page how it ist generated?
If I did not included any of the necessary informations, pleas ask for them, i will provide them if I am able to.
Thanks a lot for any help!
Regards,
Peter
解决方案
There is no way to style radio buttons with pure CSS, but you can do it with CSS and JavaScript mix, positioning a fake image over the radio and displaying to none the radio button
At the beginning, to do this, to doesn´t matter if you have a label or not.
If you don´t want to make your own script, there are several plugin to do this:
- http://www.hongkiat.com/blog/css3-checkbox-radio/
- http://www.csscheckbox.com/radio-buttons.php
- Even I´ve my own plugin: http://albertofortes.com/projects/piscoPrettyForms/
In my plugin you don't need the label to style the radio button, there is a label but isn't use to style so you can remove it and still works.
See this code edited with Inspector tools:
这篇关于没有标签的样式单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！