다른 색상

Question

나는 스타일 radion 버튼에이 방법을 원하는 :

내가 지금 다음과 같습니다 한 코드 :

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; 
} 

와 HTML 코드 :

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

input [type = radio]에 다른 클래스를 추가 할 수 있습니까? 반만 라디오 버튼을 채우시겠습니까? 여기 jsfiddle입니다 : http://jsfiddle.net/x5d4tyq7/이

Answer 1

스타일 사용이 CSS를 오른쪽 라디오 버튼을 선택합니다 :

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

을

활성 상태 인 경우 첫 번째 라디오 버튼을 선택합니다. nth-of-type (1)을 임의의 숫자로 변경하여 올바른 라디오 버튼을 선택하십시오.

이것은 당신의 예에 라디오 버튼을 변경합니다

줄무늬 : 흰색

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 블랙/:

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%); 

흰색 :

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

Here is the JSfiddle with the working code.

Answer 2

당신은 선형 그라데이션으로 before을 채울 수는

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>