CODEWITHSUNDEEP
javascripthtmlcssradio-button
Felix
Felix

Reputation: 1017

Different colors for radio buttons

I want to style radion buttons this way:

enter image description here

The code I have right now looks like this:

input[type=radio] {
display:none;
}
input[type=radio]:checked +label:before {
background:green;
width: 15px;
height: 15px;
border: 0;
border-radius: 50%;
}
label {
color:black;
font-family:arial;
font-size:12px;
position:relative;
padding-left:20px;
}
label:hover {
color:green;
}
label:hover:before {
border:1px solid green;
border-radius: 50%;
}
label:before {
content:'';
height:13px;
width:13px;
border:1px solid lightgray;
border-radius: 50%;
display:inline-block;
position:absolute;
top:0;
left:0;
}

and the HTML-code:

<input id="kunstmuseum1" type="radio" name="kunstmuseum" onClick="animateKunst('voll')">    <label class="gruen" for="kunstmuseum1">Volle Subvention</label>
<input id="kunstmuseum2" type="radio" name="kunstmuseum" onClick="animateKunst('halb')"><label for="kunstmuseum2">Subventionen um die Hälfte kürzen</label>
<input id="kunstmuseum3" type="radio" name="kunstmuseum" checked="checked" onClick="animateKunst('null')"><label for="kunstmuseum3">Keine Subventionen mehr</label>

Is it possible to add different classes for input[type=radio] and how can I fill a radio button only half? Here is a jsfiddle: http://jsfiddle.net/x5d4tyq7/

Upvotes: 1

Views: 1630

Answers (2)

Stefan
Stefan

Reputation: 1905

To select the right radio button for the style use this css:

input[type=radio]:checked:nth-of-type(1) +label:before{

This will select the first radio button if its active. Change the nth-of-type(1) to any number to select the right radio button.

This changes the radio buttons to your examples:

Stripes:

  background: -webkit-repeating-linear-gradient(315deg, black, white 10%);
  background: -o-repeating-linear-gradient(315deg, black, white 10%);
  background: -moz-repeating-linear-gradient(315deg, black, white 10%);
  background: repeating-linear-gradient(315deg, black, white 10%);

50/50 black/white:

  background: -webkit-repeating-linear-gradient(90deg, black, black 49%, white 51%, white 100%);
  background: -o-repeating-linear-gradient(90deg, black, black 49%, white 51%, white 100%);
  background: -moz-repeating-linear-gradient(90deg, black, black 49%, white 51%, white 100%);
  background: repeating-linear-gradient(90deg, black, black 49%, white 51%, white 100%);

white:

  background-color: white;
  border: solid 1px green;

Here is the JSfiddle with the working code.

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115296

You can fill the before with a linear gradient 

input[type=radio] {
    display:none;
}
input[type=radio]:checked +label:before {
    background: linear-gradient(to right, green 0%,green 50%, rgba(255, 255, 255, 1) 51%, rgba(255, 255,255, 1) 100%);
    /* W3C */
    width: 15px;
    height: 15px;
    border: 0;
    border-radius: 50%;
}
label {
    color:black;
    font-family:arial;
    font-size:12px;
    position:relative;
    padding-left:20px;
}
label:hover {
    color:green;
}
label:hover:before {
    border:1px solid green;
    border-radius: 50%;
}
label:before {
    content:'';
    height:13px;
    width:13px;
    border:1px solid lightgray;
    border-radius: 50%;
    display:inline-block;
    position:absolute;
    top:0;
    left:0;
}
<input id="kunstmuseum1" type="radio" name="kunstmuseum" onClick="animateKunst('voll')">
<label class="gruen" for="kunstmuseum1">Volle Subvention</label>
<input id="kunstmuseum2" type="radio" name="kunstmuseum" onClick="animateKunst('halb')">
<label for="kunstmuseum2">Subventionen um die Hälfte kürzen</label>
<input id="kunstmuseum3" type="radio" name="kunstmuseum" checked="checked" onClick="animateKunst('null')">
<label for="kunstmuseum3">Keine Subventionen mehr</label>

Upvotes: 0

Related Questions