양식 내의 다른 라디오 스타일

긴 양식이 있습니다. 내부에 색상 선택 라디오 버튼이 있습니다. 다른 라디오의 영향을받지 않고이 라디오에 대한 CSS 예외를 만들려면 어떻게해야합니까?양식 내의 다른 라디오 스타일

input[type="radio"] { 
 
    display: none; 
 
} 
 

 
input[type="radio"]:checked+label span { 
 
    transform: scale(1.25); 
 
} 
 

 
input[type="radio"]:checked+label .red { 
 
    border: 2px solid #711313; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    width: 25px; 
 
    height: 25px; 
 
    margin-right: 10px; 
 
    cursor: pointer; 
 
} 
 

 
label:hover span { 
 
    transform: scale(1.25); 
 
} 
 

 
label span { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    transition: transform .2s ease-in-out; 
 
} 
 

 
label span.red { 
 
    background: #DB2828; 
 
} 
 

 
label span.orange { 
 
    background: #F2711C; 
 
}

<div class="radio"> 
 
    <input type="radio" name="color" id="red" value="red" /> 
 
    <label for="red"><span class="red"></span></label> 
 

 
    <input type="radio" name="color" id="green" /> 
 
    <label for="green"><span class="green"></span></label> 
 

 
    <input type="radio" name="color" id="yellow" /> 
 
    <label for="yellow"><span class="yellow"></span></label> 
 
</div>

출처

2017-12-01 Loef

당신은 단지 ID를 스타일을 할 수 없습니다? – Axnyff

제가 만든 스 니펫을 업데이트하십시오 – mplungjan

자바 스크립트를 사용하여 토글 클래스 –

당신은 용기에 그 실체를 포장하고 그것을 위해 클래스를 지정할 수 있습니다.

다음은 w3schools의 샘플 코드입니다.

<html> 
<style> 
/* The container */ 
.container { 
display: block; 
position: relative; 
padding-left: 35px; 
margin-bottom: 12px; 
cursor: pointer; 
font-size: 22px; 
-webkit-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 
} 

/* Hide the browser's default checkbox */ 
.container input { 
position: absolute; 
opacity: 0; 
} 

/* Create a custom checkbox */ 
.checkmark { 
position: absolute; 
top: 0; 
left: 0; 
height: 25px; 
width: 25px; 
background-color: #eee; 
} 

/* On mouse-over, add a grey background color */ 
.container:hover input ~ .checkmark { 
background-color: #ccc; 
} 

/* When the checkbox is checked, add a blue background */ 
.container input:checked ~ .checkmark { 
background-color: #2196F3; 
} 

/* Create the checkmark/indicator (hidden when not checked) */ 
.checkmark:after { 
content: ""; 
position: absolute; 
display: none; 
} 

/* Show the checkmark when checked */ 
.container input:checked ~ .checkmark:after { 
display: block; 
} 

/* Style the checkmark/indicator */ 
.container .checkmark:after { 
left: 9px; 
top: 5px; 
width: 5px; 
height: 10px; 
border: solid white; 
border-width: 0 3px 3px 0; 
-webkit-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
transform: rotate(45deg); 
} 
</style> 
<body> 

<h1>Custom Checkboxes</h1> 
<label class="container">One 
    <input type="checkbox" checked="checked"> 
    <span class="checkmark"></span> 
</label> 
<label>Two 
    <input type="checkbox"> 
    <span class="checkmark"></span> 
</label><br/> 
<label>Three 
    <input type="checkbox"> 
    <span class="checkmark"></span> 
</label> 
<label class="container">Four 
    <input type="checkbox"> 
    <span class="checkmark"></span> 
</label> 

</body> 
</html>

출처

2017-12-01 13:25:21

그냥 exemption라는 클래스를 추가 한 다음 CSS는 클래스 따라서 다른 라디오 버튼은 영향을받지 않습니다, 상단 가장 수준으로 존재하는 경우에만 적용 할 수 있습니다. 라디오 버튼 색상 선택 도구를 만들었습니다. 무엇이 빠져 있는지 알려주세요!

.exemption input[type="radio"] { 
 
    display: none; 
 
} 
 

 
.exemption input[type="radio"]:checked+label span { 
 
    transform: scale(1.25); 
 
} 
 

 
.exemption input[type="radio"]:checked+label .red { 
 
    border: 2px solid #711313; 
 
} 
 

 
.exemption input[type="radio"]:checked+label .yellow { 
 
    border: 2px solid darkyellow; 
 
} 
 
.exemption input[type="radio"]:checked+label .red { 
 
    border: 2px solid darkred; 
 
} 
 

 
.exemption label { 
 
    display: inline-block; 
 
    width: 25px; 
 
    height: 25px; 
 
    margin-right: 10px; 
 
    cursor: pointer; 
 
} 
 

 
.exemption label:hover span { 
 
    transform: scale(1.25); 
 
} 
 

 
.exemption label span { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    transition: transform .2s ease-in-out; 
 
} 
 

 
.exemption label span.red { 
 
    background: #DB2828; 
 
} 
 
.exemption label span.green { 
 
    background: green; 
 
} 
 
.exemption label span.yellow { 
 
    background: yellow; 
 
}

<fieldset> 
 
    <div class="radio exemption"> 
 

 
    <input type="radio" name="color" id="red" value="red" /> 
 
    <label for="red"><span class="red"></span></label> 
 

 
    <input type="radio" name="color" id="green" /> 
 
    <label for="green"><span class="green"></span></label> 
 

 
    <input type="radio" name="color" id="yellow" /> 
 
    <label for="yellow"><span class="yellow"></span></label> 
 
    </div> 
 
</fieldset>

출처

2017-12-01 13:27:18

@Loef는이 답변으로 도움이됩니까? –

답변

관련 문제