Jump to content
mrludable

input[type="radio"]:checked + span Styling Issue

Recommended Posts

Hi again,

 

I'm trying to style radio buttons and display a bg colour on the span when the radio button is selected but it doesn't seem to be working. Here's the HTML & CSS.

<div class="options">
   <label for="windowFront">
      <input id="windowFront" class="js-radio-button" name="window" value="Front" type="radio">
      <span>Front Windscreen</span>
   </label>
</div>

.options label input[type="radio"]:checked + span	{
    background: #ed1c24;
    color: #fff;
}

Any ideas why it's not working?

 

Thanks,
Al.

Share this post


Link to post
Share on other sites

I'm guessing this is part of the previous code? What you're trying to do with the span is essentially emulate a label. With this in mind, I've refactored your code to use the label in place of the span https://jsfiddle.net/42876wdq/.

 

If you still want to do what you have above, you don't need the for attribute on the label if you wrap it around your input, it's implied that the text inside there is the content of your label https://jsfiddle.net/42876wdq/1/.

Share this post


Link to post
Share on other sites

Thanks for the reply Jack. It sure is in relation to the previous post.

 

What I'm trying to do is use a bg image in place of the radio button but keep the radio button functionality, I seen while searching earlier that some people mentioned that if the radio button (input) is set to display none it won't work.

 

Here is what I am trying to accomplish.

 

Which brings me to the next point, there are different sections in the form and when a user selects one section I'd like another section to appear.

 

Here is the code I have so far some the sections, I'm a novice at all this so excuse the coding and I know there must be a better way to code this up.

$('input[name=window]').change(function () {
    if ($(this).val() == 'Front') {
        $('#damageChips').show();
    } else {
        $('#damageChips').hide();
    }
});
$('input[name=damage]').change(function () {
    if ($(this).val() == 'oneToThree') {
        $('#chipSize').show();
    } else {
        $('#chipSize').hide();
    }
});
$('input[name=chipsize]').change(function () {
    if ($(this).val() == 'fingernail') {
        $('#edgeChip').show();
    } else {
        $('#edgeChip').hide();
    }
});
$('input[name=edgechip]').change(function () {
    if ($(this).val() == 'Yes') {
        $('#result').show();
    } else {
        $('#result').hide();
    }
});
$('input[name=continue]').change(function () {
    if ($(this).val() == 'Yes') {
        $('#details').show();
    } else {
        $('#details').hide();
    }
});

What the code above does is display the next form section, but what I noticed is if I select in the correct order the options above, they work fine but if I go back to the start of the form and change the first option the other options below are still displayed so I'm thinking I'll need some code to group them together somehow, rather than have them work individualy - hope that makes sense.

 

Al.

Share this post


Link to post
Share on other sites

Can you put what you have so far inside codepen.com or jsfiddle.com? It makes it easier to find a solution.

Share this post


Link to post
Share on other sites

Hey Jack,

 

Here is a very basic fiddle of it - https://jsfiddle.net/allanlud/usjoL467/3/.

 

It does work fine here, but that is only a small portion of the overall form, there are many more options down the form similar to what you see there. So I was hoping to find out if there was a cleaner way to write the jQuery code or is it ok as is?

Share this post


Link to post
Share on other sites

You can use data-* attributes to achieve this in a much more compact way. This is an example:

<!-- data-ref corresponds to the target form to be displayed -->
<input id="windowFront" class="js-radio-button" name="window" value="Front" type="radio" data-form="#damageChips">
<!-- target form to be displayed when the radio is changed -->
<div id="damageChips" class="form-section js-form-section">
... 
</div> 
// jQuery
var $radioButtons = $('.js-radio-button');
var $forms = $('.js-form-section');

$radioButtons.change(function() {
	var $this = $(this);
  var targetForm = $this.data('form');
 
  $forms.hide();    
  $(targetForm).show();
});
 

Fiddle demo: https://jsfiddle.net/usjoL467/4/

Share this post


Link to post
Share on other sites

Why not add a classname to your radio buttons then your selectors won't be qualified so deeply and you will have reduced selector specificty.

.radio:checked + .radio-ui {}
is much nicer than 
.options label input[type="radio"]:checked + span

Qualifying selectors is really bad for maintainability. what happens if that span changes to a div or the label becomes a div and the span becomes a label? With a class you are not tied to the html element semantics so your concerns are no longer mixed.

I wouldn't use jQuery's hide/show helpers as they add in a bunch of CSS and do so quite inefficiently as Paul Irish alludes to here: https://twitter.com/paul_irish/status/564443848613847040?lang=en You are better to add / remove stateful classes such as .is-hidden / .is-active and so on.

Edited by rbrtsmith

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,516
    • Most Online
      4,970

    Newest Member
    Codespinner
    Joined
  • Forum Statistics

    • Total Topics
      65,729
    • Total Posts
      455,373
×