CODEWITHSUNDEEP
javascripthtmlcsscheckboxradio-button
user3405427
user3405427

Reputation: 43

Styling radio button without label

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:

or

or

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

Upvotes: 4

Views: 12523

Answers (2)

B. Symons
B. Symons

Reputation: 39

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

Upvotes: 3

Alberto Fortes
Alberto Fortes

Reputation: 562

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:

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:

enter image description here

Upvotes: 1

Related Questions