verschiedene Radio-Stil in einem Formular

Ich habe eine lange Form. Im Inneren gibt es einen Farbauswahlknopf Wie kann ich eine css-Ausnahme für dieses Radio machen, ohne alle anderen Radio zu beeinflussen?verschiedene Radio-Stil in einem Formular

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>

Quelle

2017-12-01 Loef

kann nicht nur Sie die ID-Stil? – Axnyff

Bitte aktualisieren Sie das Snippet, das ich gemacht habe – mplungjan

Toggle Klassen mit Javascript –

Sie könnten, dass die Einheit in einem Behälter wickeln und die Klasse für sie angeben.

Unten ist ein Beispielcode von 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>

Quelle

2017-12-01 13:25:21

Fügen Sie einfach eine Klasse namens exemption und lassen Sie die CSS nur angewendet werden, wenn die Klasse auf der obersten Ebene vorhanden ist, damit Ihre anderen Radio-Buttons sind nicht betroffen. Ich habe den Radiobutton Color Picker arbeiten lassen, bitte lassen Sie mich wissen, was hier fehlt!

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

Quelle

2017-12-01 13:27:18

@ Loef hilft diese Antwort Ihnen? –

verschiedene Radio-Stil in einem Formular

Antwort

Verwandte Themen