没有标签的样式单选按钮 [英] Styling radio button without label

问题描述

我现在面临这个问题:我想为系统生成的没有标签的单选按钮和复选框设置样式.

我正在使用 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:

  这篇关于没有标签的样式单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！