Radio buttons checked CSS

Freeway
#1

Hi there,

Again busy with the radio buttons. I’ve managed customize the dot, but I can’t seem to get the :checked tag working. So the button/text will change color, size or anything. I’ve tried the :active tag but that only works for a moment when clicking on it.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

#2

We need to see your example online with an indication of what you want to happen.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

#3

http://plug-and-play.nl/test/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

#4

You aren’t actually styling the button at all - you are styling some content of the label of the button. Hence no Checked state.

Is it the Label or the Button that you wish to style? The label is the text associated with the button.

Personally I wouldn’t advise styling the button as it recognised system wide as it is.

However it can be done.

Here is one article on the subject.

It will also depend on Browser support with your target market.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

#5

Thanks! Still, what if I want the label to change? How can I change it’s color when the button is checked?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

#6

If you want the label associated with a particular checkbox or radio button to change depending on the state of the input, you are probably going to have to break out some JavaScript for that. I am not aware of a CSS selector that can use a child element (and thus its state) to select the parent. It’s been wished for many many times, and hasn’t come true yet.

In Prototype:

var synchronize_labels = function(){
  $$('input[type="radio"]').each(function(elm){
    if(elm.checked){
      elm.up('label').addClassName('checked-appearance');
    }else{
      elm.up('label').removeClassName('checked-appearance');
    }
  });
};
document.on('click', synchronize_labels);

This assumes that you are wrapping labels around your inputs, as is the best practice for something as small as a radio button.

Walter

On Nov 4, 2015, at 3:41 AM, Frans Boumans email@hidden wrote:

Thanks! Still, what if I want the label to change? How can I change it’s color when the button is checked?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

#7

Forgot one line, which will get it to synchronize state at the page load, too:

var synchronize_labels = function(){
 $$('input[type="radio"]').each(function(elm){
   if(elm.checked){
     elm.up('label').addClassName('checked-appearance');
   }else{
     elm.up('label').removeClassName('checked-appearance');
   }
 });
};
synchronize_labels();
document.on('click', synchronize_labels);

All of this should be inside the event listener for the page load. If you are using the Protaculous 2 Action to add this to your page, just put it in the DOM Loaded Observer editor in that Action. If you are hand-coding this, then you would do this, inside a script block, either in the page head or at the bottom of the body:

document.observe('dom:loaded', function(){
// paste all that code here
});

Walter

On Nov 4, 2015, at 7:26 AM, Walter Lee Davis email@hidden wrote:

If you want the label associated with a particular checkbox or radio button to change depending on the state of the input, you are probably going to have to break out some JavaScript for that. I am not aware of a CSS selector that can use a child element (and thus its state) to select the parent. It’s been wished for many many times, and hasn’t come true yet.

In Prototype:

var synchronize_labels = function(){
 $$('input[type="radio"]').each(function(elm){
   if(elm.checked){
     elm.up('label').addClassName('checked-appearance');
   }else{
     elm.up('label').removeClassName('checked-appearance');
   }
 });
};
document.on('click', synchronize_labels);

This assumes that you are wrapping labels around your inputs, as is the best practice for something as small as a radio button.

Walter

On Nov 4, 2015, at 3:41 AM, Frans Boumans email@hidden wrote:

Thanks! Still, what if I want the label to change? How can I change it’s color when the button is checked?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

#8

I am not aware of a CSS selector that can use a child element (and thus its state) to select the parent.

How about this. Not targeting the parent but the label after the radio button and then using the adjacent sibling selector.

<style type= "text/css">
input[type="radio"]:checked + label {
 color: red;
}
</style>

FW example - http://deltadesign.co/FW7Test/button-label-sty.html

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

#9

Hi David,

That’s it! But where do I add this code?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

#10

But where do I add this code?

Page>Html Markup in the Before section.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options