Firstly, apologies I'm not responding to an existing question about this topic (there are tons), but I haven't got enough reputation here to add comments yet :(
My solution to this age-old problem:
- Uses CSS ONLY
- No need to have a label/span element after the input
- Has been tested on latest Chrome, FF, IE, Opera, Safari browsers
- Allows for using font-icon libraries like Font Awesome
Let's get down to it
With the ability to hide the input[type=checkbox] and input[type=radio] default browser appearances using
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
We can add our own basic styling to these inputs without hiding them.
In the snippet below you will see how I've:
-
contained the inputs within a span (could be any container really) and set relative positioning to this container
-
set the ::before pseudo-element on the container itself, this is where we defined the "checked" state, using absolute positioning and z-index to place the element behind the unchecked input
-
hidden the browser appearance of the inputs
-
added basic CSS using border, border-radius, background, absolute positioning and z-index to cover the "checked" pseudo-element when the input is not checked
-
adjusted the z-index of the input when it is :checked
Depending on your icon styling you'll probably need to adjust the input and pseudo-element positioning.
So far I have tested on all standard browsers without issue. Please let me know if you pick up any problems with the code below, I haven't done extensive testing on older browser versions.
body {
font-family:sans-serif;
font-size:14px;
}
span.checkbox, span.radio {
padding-top: 0px;
display: block;
position: relative;
cursor: pointer;
vertical-align: top;
line-height:25px;
height:25px;
}
.checkbox input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
top: 0;
left: 0;
border-radius: 2px;
background: #fff;
border: 2px solid #999;
height: 19px;
width: 19px;
margin-left: 0px;
z-index: 2;
}
.checkbox input[type=checkbox]:checked {
z-index: 0;
border-color: green;
}
.checkbox::before {
position: absolute;
left: 0;
top: 0;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 21px;
color: green;
content: '\f14a';
z-index: 1;
pointer-events: none;
}
.radio input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
top: 2px;
left: 0;
border-radius: 50%;
background: #fff;
border: 2px solid #999;
height: 20px;
width: 20px;
margin-left: 0px;
margin-top: 0px;
z-index: 2;
}
.radio input[type=radio]:checked {
z-index: 0;
}
.radio::before {
position: absolute;
top: 6px;
left: 4px;
border-radius: 50%;
border: none;
background: green;
height: 12px;
width: 12px;
margin-left: 0px;
margin-top: 0px;
z-index: 1;
pointer-events: none;
content: '';
}
input[type=checkbox]:focus, input[type=radio]:focus{
outline:none;
}
input[type=checkbox] + label, input[type=radio] + label {
padding-left: 25px;
}<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<h4>Checkbox with label</h4>
<span class="checkbox">
<input type="checkbox" id="chk-lbl"/>
<label for="chk-lbl">Checkbox with label</label>
</span>
<h4>Checkbox without label</h4>
<span class="checkbox">
<input type="checkbox"/>
</span>
<h4>Radio buttons</h4>
<span class="radio">
<input type="radio" name="group" id="rdb-1"/>
<label for="rdb-1">Radio button with label</label>
</span>
<span class="radio">
<input type="radio" name="group" id="rdb-2"/>
</span>
</body>
Aucun commentaire:
Enregistrer un commentaire