Jump to content


Photo

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


  • Please log in to reply
6 replies to this topic

#1 mrludable

mrludable

    Advanced Member

  • Members
  • PipPipPip
  • 315 posts
  • Gender:Male
  • Location:Ireland
  • Experience:Beginner
  • Area of Expertise:Web Designer

Posted 18 May 2017 - 02:06 PM

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.



#2 Jack

Jack

    NaN

  • Moderators
  • PipPipPipPipPip
  • 3,183 posts
  • Gender:Male
  • Location:Jersey Channel Islands
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 18 May 2017 - 02:43 PM

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/.



#3 mrludable

mrludable

    Advanced Member

  • Members
  • PipPipPip
  • 315 posts
  • Gender:Male
  • Location:Ireland
  • Experience:Beginner
  • Area of Expertise:Web Designer

Posted 18 May 2017 - 02:54 PM

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.



#4 Jack

Jack

    NaN

  • Moderators
  • PipPipPipPipPip
  • 3,183 posts
  • Gender:Male
  • Location:Jersey Channel Islands
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 19 May 2017 - 08:13 AM

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



#5 mrludable

mrludable

    Advanced Member

  • Members
  • PipPipPip
  • 315 posts
  • Gender:Male
  • Location:Ireland
  • Experience:Beginner
  • Area of Expertise:Web Designer

Posted 19 May 2017 - 08:59 AM

Hey Jack,

 

Here is a very basic fiddle of it - https://jsfiddle.net...lud/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?



#6 Lyndsey

Lyndsey

    Web Guru

  • Moderators
  • PipPipPipPipPip
  • 1,068 posts
  • Gender:Female
  • Location:South Wales
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 19 May 2017 - 12:00 PM

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/



#7 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 4,013 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 19 May 2017 - 12:50 PM

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/...3847040?lang=en You are better to add / remove stateful classes such as .is-hidden / .is-active and so on.


Edited by rbrtsmith, 19 May 2017 - 12:53 PM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users