Request: syntax change for radio inputs

  • Resolved David2015

    (@david2015)


    6 years, 5 months ago

    Hey Aleexander,

    while trying to style the tests radio-buttons/inputs with css I found that this is very difficult due to the code syntax.

    It now is

    <label for....>
<input id="">
Label Text
</label>

    However it would better be

    <input id="">
<label for....>Label Text</label>

    The reason is that in the second case, the radios can easily be styled with CSS as
    input[type=radio] + label {}
    and
    input[type=radio]:checked + label {}
    While in the first case they can not.
    (it is called adjacent sibling combinator in css, the second sibling has to follow the first, not enclose it)

    It would be awesome to change that in some future update! It would open so many doors for styling!

    David

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Contributor ustimenko

    (@ustimenko)

    hi David,

    I’m not sure I can break this as it will be not backward compatible.

    What can’t you style with current code?

    Have you tried this?

    label > input[type=radio]

    Thread Starter David2015

    (@david2015)

    Dear Alexander,

    ah, ok that is unfortuate.

    I want to style the label element depending on the state of the input.
    This way I can design my own radio-buttongs, change label color when selected asf..

    This is also not possible with the child selector, as I want to style the label according the input, not the other way around.

    Actually I can’t think of any other way to replace the radios with custom ones.
    The only other option would be when answers would be an

      , then I could style the li-elements but that is also not the case..

      Best
      David

    Plugin Contributor ustimenko

    (@ustimenko)

    There is data-attribute and it’s changed by javascript.

    See https://github.com/garex/wp-testing/blob/d58e6674f9ded41530c7f35b56839a6086d139c7/js/test-pass-fill-form.js#L144

    Something like .question[answered=true] label should help. Or you will find correct CSS path.

    Plugin Contributor ustimenko

    (@ustimenko)

    Or I can add such attribute on answer.

    Thread Starter David2015

    (@david2015)

    Dear Alexander,

    ah, that is a clever idea. But the .question aswered would change all labels on all answers for that question. I want to change only the checked answer to mimick the radio button

    I now just edited the fill-form.php myself and moved the label below the input (from line 52 to line 62). That works fine, but will of course break with each update..

    If you would include a data attribute on the answers, that would open a possibility, but I have never tried it that way.

    Thank you for you quick replys!
    David

    Plugin Contributor ustimenko

    (@ustimenko)

    David,

    Let’s check first, that this data-attribute way works.

    Can you provide some css on question answered/not?

    Thread Starter David2015

    (@david2015)

    Hello Alexander,

    it should be something like this

    /* Hiding the orginal radios */
.answer input[type="radio"] {
	display: none;
}

/* Add label background*/
.wpt_test .answer label {
	background: url('') left top no-repeat;
	display: inline-block;
	}

/*change label background when radio checked*/
.wpt_test .answer[checked=true] label {
	background: url('') left top no-repeat;
	display: inline-block;
	
}

    Hope there is no mistake in there.
    In reality you would use only one image and move it with margins, but this is easier now.

    David

    • This reply was modified 6 years, 4 months ago by David2015.
    • This reply was modified 6 years, 4 months ago by David2015.
    • This reply was modified 6 years, 4 months ago by David2015.
    Plugin Contributor ustimenko

    (@ustimenko)

    Hotfixed in 0.21.13.

    .answer { /* all answers */ }
    .answer.selected { /* only selected/checked answers */ }

    Thread Starter David2015

    (@david2015)

    Awesome!

    Thread Starter David2015

    (@david2015)

    Actually I cannot get this to work, the class doesn’t seem to change with selection after the update.

    Plugin Contributor ustimenko

    (@ustimenko)

    @david2015 how to repeat it? Which browser version do you use?

    Thread Starter David2015

    (@david2015)

    I just realized you put that on the divs, not the labels itself ??
    I will try if this works just as well

    Thanks again, awesome support
    David

    Thread Starter David2015

    (@david2015)

    double sent, deleted

    • This reply was modified 6 years, 4 months ago by David2015.
Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Request: syntax change for radio inputs’ is closed to new replies.