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

问题描述

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

我正在使用IBM SPSS Data Collection进行在线调查，这意味着它会根据一些我可以风格化的模板生成所有问题）。

我发现很多教程如何使用纯CSS来设计单选按钮和复选框的样式，问题是，他们都使用了标签： ; label for =id>< / label> 。点是，生成代码没有< label> 。

正如我所说，对象没有标签，单个单选按钮例如由这个代码定义（我也想附加截图它看起来像，但我不有足够的声望点）：

 < td id =Cell.2.1style =text-Align：Center; vertical -align：Middle; background-color：＃e6efe6; width：7％; border-color：Black; border-style：Solid; border-width：0px;> 
< div>< / div> 
< input type =radioname =_ QQ3_Qa_QSingleResponseQuestion_Cid =_ Q0_Q0_Q0_C1class =mrSinglestyle =font-family：Trebuchet MS; font-size：9pt; value =b>< / input> 
< / td> 
  

我试图更改html代码以添加标签，它工作，但它不是我需要的。这个解决方案发生的问题是，我不能让系统旋转整合的主题（问题），因为页面不能生成，但必须显式写入。

当我使用这个解决方案（这不是合适的），我可以简单地restable单选按钮和复选框与lable使用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; 
} 
 
输入[type = radio]：not（old）：checked + label {
 background：url（'/ radio_on.png'）no-repeat 0 0; 
 background-size：29px 29px; 
} 
  

所以我的问题是：

$ b $

或 p>

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

或

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

如果我没有提供任何必要的信息，请求他们，我会

非常感谢您的帮助！

彼得

解决方案

---

是没有办法用纯CSS来创建单选按钮的样式，但是你可以使用CSS和JavaScript混合，在无线电定位一个假图像，并显示无单选按钮
在开始，为了做到这一点，如果你有一个标签或没有。
如果你不想制作自己的脚本，有几个插件：

• http://www.hongkiat.com/blog/css3-checkbox-radio/ li>
  
• http://www.csscheckbox.com/radio-buttons。 php


• 即使我有自己的插件： http： //albertofortes.com/projects/piscoPrettyForms/

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/

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