Ich habe gelesen, dass aufgrund der verschiedenen Browsereinstellungen gibt es keine guten Möglichkeiten, Kontrollkästchen zu stylen. Ich weiß, dass Sie in der Lage sein sollten, die Hintergrundfarbe zu ändern, indem Sie jedes Kontrollkästchen in Div einfügen, aber wie wäre es mit Border und Arraow?Checkbox Hintergrundfarbe und Stil
Aber vielleicht hat jemand irgendwelche Tipps, damit sie wie dieser Art:
Im Moment habe ich standardmäßig in Firefox:
Wenn Sie Fontawesome verwenden (http://fontawesome.io/icons/) , werden Sie in der Lage sein, diese Elemente wie jede andere Schriftart zu gestalten. Oder http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/
Willkommen bei Stack Overflow! Während dies theoretisch die Frage beantworten könnte, [wäre es vorzuziehen] (// meta.stackoverflow.com/q/8259), hier die wesentlichen Teile der Antwort aufzunehmen und den Link als Referenz bereitzustellen. –
Verwenden maskiert Overlay
label {
display: block;
border: 4px solid #88a;
box-shadow: 1px 1px 3px rgba(0, 0, 0, .3) inset;
border-radius: 10%;
width: 1em;
height: 1em;
}
input {
display: none;
}
input:checked + label {
background-color: rgba(0, 255, 0, .8);
box-shadow: 0px 0px 2px rgba(0, 0, 0, .1) inset;
}<input type="checkbox" id="chk">
<label for="chk"></label>Deddy, können Sie Elemente nach <input> mit CSS-Code input + div stylen. Wenn das Kontrollkästchen aktiviert ist, versuchen Sie den Stil input:checked + div. Wenn Sie Eingabeelement ausblenden und alle mit <label> umgeben, können Sie einfach div-Element und andere in ihnen gestalten. Der Rest Ihrer Fantasie abhängt;)
<label>
<input type="checkbox">
<div></div>
</label>
ich die beste Art und Weise glauben, ist das Radio/Checkbox in einer Spanne zu wickeln, div (was auch immer) haben dann ein Etikett mit der für das Attribut an die ID des Eingangs Verknüpfung .
Dann verstecken Sie die Eingabe mit Sichtbarkeit: versteckt und Styling der Etikett, wie Sie möchten. (Beachten Sie, dass Sie mehrere Labels für eine Eingabe haben können).
Sie können eine Vorher oder Nachher verwenden, um die Häkchen hinzuzufügen.
.styled-radio {
visibility:hidden;
position:absolute;
z-index:-2;
}
.styled-radio-label {
border:1px solid #ccc;
height:15px;
width:15px;
position:relative;
}
.styled-radio:checked + .styled-radio-label:after {
content:'\2713';
position:absolute;
left:50%;
top:50%;
transform:translateY(-50%) translateX(-50%);
}
label {
display:inline-block;
vertical-align:middle;
}<span>
<input type='radio' id='html' value='html' class='styled-radio' name='lang'/>
<label for='html' class='styled-radio-label'></label>
<label for='html'>HTML</label>
</span>
<span>
<input type='radio' id='css' value='css' class='styled-radio' name='lang'/>
<label for='css' class='styled-radio-label'></label>
<label for='css'>CSS</label>
</span>
<span>
<input type='radio' id='JS' value='JS' class='styled-radio' name='lang'/>
<label for='JS' class='styled-radio-label'></label>
<label for='JS'>JS</label>
</span>
Ich habe Firefox nicht, so sind diejenigen, die Standard-Designs, oder haben Sie gestylt sie bereits für sich selbst (und wenn ja, können Sie bitte die CSS zeigen)? –
http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css – Andrew