造型单选按钮没有标签

Question

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 eg 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

Answer 1

---

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:

Answer 2

For pure CSS styling of Radio Button without label, try the following:

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

The width, height, border thickness and colours can all be styled as required.

It is also possible to use svg images for the checked and unchecked states using something like below:

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