CODEWITHSUNDEEP
htmlcssradio-button
Rajeev
Rajeev

Reputation: 1371

this css not working for radio button selection

in following jsfiddle, I am trying to change the color of selected radio button for two (or more) different radio groups, by only using CSS. I am missing something i do not know.

http://jsfiddle.net/2nxnk/1/

CODE:

<input type="radio" name="group0" value="1" /> One
<input type="radio" name="group0" value="2" /> Two
<input type="radio" name="group0" value="3" /> Three
<p>
<input type="radio" name="group1" value="4" /> Four
<input type="radio" name="group1" value="5" /> Five
<input type="radio" name="group1" value="6" /> Six

CSS:

input[type="radio"]:checked{ color: green; }

i do not want to use any jquery unless there is no other way. pl advice.

EDIT: I decided to edit the question: I want to change the color of 'text of radio button'. secondly i did not want to clutter the html page with ID's if the only use is to change text color. My question now is: 1. is using the label only way? 2. seems using IDs you get capability of coloring different radio group (text again) differently. is that correct? 3. finally maybe a simple question: I though only javascript catches the action on the page, when there is no javascript how does CSS triggers the effect?

thx all for help and I also upped the last example which colors the radio button image itself.

Upvotes: 0

Views: 16067

Answers (7)

Emir
Emir

Reputation: 390

In case that you are already using Bootstrap (both CSS and JavaScript) you could use class selector active to achieve effect like the one you want.

See this fiddle: https://jsfiddle.net/7k0dbgsa/1/

.active
{
    color: green;
}

The fiddle has been forked from https://jsfiddle.net/KyleMit/0nevkwyn/

Upvotes: 0

Dryden Long
Dryden Long

Reputation: 10182

Update

Here is a new fiddle with the actual buttons like I was referring to.

Link: jsfiddle


Others have answered how to change the text, which I believe is what you are looking for based on your attempt. But, in the off chance you are looking to change the appearance of the button itself you could use <label for="#id"> and some CSS styling/opacity tricks to replace the buttons with images. Then, change the background color when checked. My example and fiddle use placekittens, but you could substitute the <img> sources with any image you wanted (a colored radio button with 50% opacity for example would allow you to disregard the opacity section of code.) See my code below and this fiddle. You'll have to play with the margin and padding settings to make the background color canvas the entire image, but this should give you an idea.

HTML

<input id="a" type="radio" name="group0" value="1" />
  <label for="a"><img src="http://www.placekitten.com/40/40" /></label>
<input id="b" type="radio" name="group0" value="2" />
  <label for="b"><img src="http://www.placekitten.com/40/39" /></label>
<input id="c" type="radio" name="group0" value="3" />
  <label for="c"><img src="http://www.placekitten.com/39/40" /></label>
<p>
<input id="d" type="radio" name="group1" value="4" />
  <label for="d"><img src="http://www.placekitten.com/38/40" /></label>
<input id="e" type="radio" name="group1" value="5" />
  <label for="e"><img src="http://www.placekitten.com/40/38" /></label>
<input id="f" type="radio" name="group1" value="6" />
  <label for="f"><img src="http://www.placekitten.com/39/38" /></label>

CSS

input {
  display: none;
}
input[type="radio"]:checked + label {
  background-color: green;
}
img {
  opacity:0.4;
  filter:alpha(opacity=40); /* For IE8 and earlier */
}

Upvotes: 1

PSL
PSL

Reputation: 123739

If you want to change the text next to the radio button, you can do this way

Html

<input type="radio" name="group0" value="1" /><label>One</label>
<input type="radio" name="group0" value="2" /><label>Two</label> 
<input type="radio" name="group0" value="3" /><label>Three</label> 
<p>
<input type="radio" name="group1" value="4" /><label>Four</label> 
<input type="radio" name="group1" value="5" /><label>Five</label> 
<input type="radio" name="group1" value="6" /><label>Six</label>

Css

input[type="radio"]:checked + label {
    color: green;
}

Fiddle

Probably pseudo element can help a bit:-

input[type="radio"]:checked +label {
    color: green;
  }

input[type="radio"]:checked:before
{
 content:'.';
 position:relative;
 display:inline-block;
 background-color:green;
 width:12px;
 opacity:.3;
 top:-1px;
 border-radius:10px;
 -moz-border-radius:10px;
}

Fiddle

Upvotes: 4

Andy
Andy

Reputation: 14575

Did you consider making your own radio boxes? Using labels that is

We can make labels act like radio boxes by using the "for" attribute, which then makes it clickable and react to the :checked selector. The best thing about these is a label is a basic HTML element so you can make it look exactly as you intend. Check this relatively plain example:

DEMO

<input type="radio" name="group0" value="1" id="one"/> 
<label for="one"><div class="inner"></div></label><span>One</span>
<input type="radio" name="group0" value="2" id="two"/> 
<label for="two"><div class="inner"></div></label><span>Two</span>


input {
    display: none;
}

span, 
label {
    display: block;
    margin: 10px 10px 10px 0;
    float: left;
}

label {
    width: 20px;
    height: 20px;
    background: #ddd;
    border-radius: 10px;
}

input:checked + label{
    background: green;
}

.inner {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    margin-left: 4px;
    background: #eee;
    border-radius: 5px;
    border: 1px solid #aaa;
}

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157334

If you are looking to change the color of the text if respective radio button is selected, you can use + adjacent selector and wrap the text inside a label tag

input[type="radio"]:checked + label { 
   color: green; 
}

Demo

I've removed other boxes to decrease the clutter, but logic goes same for else

Upvotes: 1

electrikmilk
electrikmilk

Reputation: 1043

I'm not sure you can set css like that for a radio button.

BUT! you can set:

-webkit-appearance: none;
appearance: none;
  vertical-align: bottom;
  background: #fff;
  border: 1px solid #dcdcdc;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;

Maybe change the background color?

But that's about as much as you can change, sorry.

Upvotes: 0

Quentin
Quentin

Reputation: 943571

In most (if not all) browsers, you cannot change the colour of a radio button at all.

You can only simulate it by replacing the radio button with a different widget and trying to link it to the real radio button so it continues to work. Most implementations of this depend on JavaScript.

Upvotes: 2

Related Questions