Styling buttons without shortcut

Now I am faced with this problem: I want the style of buttons and checkboxes that are generated by the system and do not have a label .

I work with the IBM SPSS Data Collection to create online surveys, so this means that it generates all the questions on the page according to some template that I can create (mainly with CSS).

I learned a lot of lessons on how to create and radioknopy checkboxes with pure CSS, the problem is that they all use the label: <label for="id"></label>. The point is that the generated code does not <label>.

As I said, there are objects without a label, and one switch, for example, is defined by this code (I also wanted to attach a screenshot of how it looks, 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 changing the html code to add a shortcut, and it worked, but this is not quite what I need. The problem that arises with this solution is that I cannot let the system rotate integrated objects (questions), because the page cannot be generated, but must be explicitly written.

When I used this solution (which does not fit), I could just switch with the radio buttons and checkboxes with quotation marks using CSS, adding background images as follows:

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 reset switches and checkboxes without lable?

or

  • javacsript - ?

  • - , , . , ?

- , , , .

!

,

+4

Source: https://habr.com/ru/post/1531164/


All Articles