I am trying to replace the traditional radio button with some image. So when someone clicks on the option, the image should appear on the checkbox. My problem is, the option is not getting selected when I click on the check box. But since I have given an for attribute for the label, option is getting selected when I click on the label.
updated
here is my partially working jsFiddle
I am answering my own question
here is the jsfiddle
<ul class="pt-answers" style=" margin-bottom: 10px; margin-left:20px;">
<li style="list-style: none;">
<label for="q_2_1">
<input type="radio" id="q_2_1" name="q_2" value="1">
<img />
Answer number one </label>
</li>
<li style="list-style: none;">
<label for="q_2_2">
<input type="radio" id="q_2_2" name="q_2" value="2">
<img />
Answer number two</label>
</li>
<li style="list-style: none;">
<label for="q_2_3">
<input type="radio" id="q_2_3" name="q_2" value="3">
<img />
Answer number three</label>
</li>
<li style="list-style: none;">
<label for="q_2_4">
<input type="radio" id="q_2_4" name="q_2" value="4">
<img for="q_2_4"/>Answer number four
</label>
</li>
</ul>
I hope it will help you DEMO
<input type="checkbox">
<br><br>
<span style="position:relative">
<input type="radio" >
<span>
CSS
/* checkbox */
input[type='checkbox'] {
height: 25px;
width: 25px;
margin-top: 0;
margin-right: -25px;
margin-bottom: -25px;
margin-left: 0;
}
input[type='checkbox']:before {
width: 25px;
height: 25px;
background: white;
border: 2px solid #333434;
content: '';
position: absolute;
}
input[type='checkbox']:after {
position: absolute;
content: '';
width: 17px;
height: 6px;
top: 15px;
left: 12px;
opacity: 0;
background: transparent;
border: 1px solid black;
border-width: 3px;
border-top: none;
border-right: none;
border-radius: 1px;
-webkit-transform: rotate(-50deg);
}
input[type='checkbox']:checked:after { opacity: 1;
}
/*radio button*/
input[type='radio'] {
height: 25px;
width: 25px;
margin-top: 0;
margin-right: -25px;
margin-bottom: -25px;
margin-left: 0;
}
input[type='radio']:before {
width: 25px;
height: 25px;
background: white;
border: 1px solid #333434;
border-radius: 100%;
content: '';
position: absolute;
}
input[type='radio']:after {
opacity: 0;
position: absolute;
content: '';
width: 10px;
height: 10px;
background: black;
border: 1px solid rgba(0,0,0,0.05);
border-radius: 100%;
box-shadow: 0 1px rgba(255,255,255,0.1);
-webkit-transform: none;
top: -2px;
left: 7px;
}
input[type='radio']:checked:after { opacity: 1;
}
Related
I am trying to change 2 radio buttons border color and border thickness but for some reason it is not doing anything.
Here is my code
input[type='radio']:after {
width: 10px;
height: 10px;
border-radius: 15px;
top: -5px;
left: 3px;
position: relative;
background-color: transparent;
content: '';
display: inline-block;
visibility: visible;
border: none;
}
input[type='radio']:checked:after {
width: 10px;
height: 10px;
border-radius: 15px;
top: -5px;
left: 2.7px;
position: relative;
background-color: #f07f09;
content: "";
display: inline-block;
visibility: visible;
border: none;
}
input[type=radio]:checked {
border-color: #bbbbbb;
border: solid 3px;
}
input[type=radio]:checked:before {
border-color: #bbbbbb;
border: solid 3px;
}
<input type="radio" name="contact-option" id="1" class="otp-text-gap" [(ngModel)]="contact" value="cell" (change)="changeOTPChannel()"><span class="otp-channel-text">Cell number</span>
<input type="radio" name="contact-option" id="2" class="otp-text-gap" [(ngModel)]="contact" value="email" (change)="changeOTPChannel()"><span class="otp-channel-text">Email</span>
There are a few things which you should keep in mind, pseudo-classes are not supported by input types
you should not add an id as a number
In this below example I have used the label to trigger onchange for radio
input[type='radio']{
display:none;
}
input[type='radio'] + label{
display:inline-block;
position:relative;
padding-left: 25px;
margin-right:20px;
}
input[type='radio']:checked + label:after {
width: 10px;
height: 10px;
border-radius: 15px;
top: 4px;
left: 4px;
position: absolute;
background-color: #f07f09;
content: "";
}
input[type=radio] + label:before {
content: "";
border-color: #bbbbbb;
border: solid 3px;
width: 13px;
position: absolute;
left: 0;
height: 13px;
border-radius: 50%;
}
<input type="radio" name="contact-option" id="one" class="otp-text-gap" [(ngModel)]="contact" value="cell" (change)="changeOTPChannel()"><label for="one" class="otp-channel-text">Cell number</label>
<input type="radio" name="contact-option" id="two" class="otp-text-gap" [(ngModel)]="contact" value="email" (change)="changeOTPChannel()"><label for="two" class="otp-channel-text">Email</label>
I am trying to create a web-based rating scale with seven checkboxes, two text labels and a horizontal rule in the background. It should look similar to a paper-based rating scale. In addition, I would like to mark the middle checkbox by a short vertical rule.
Because checkboxes seem to be quite difficult to style, I replaced them by a text symbol and a border in the labels. I manually positioned these checkboxes and the vertical rule on the horizontal rule. The result looks ok in Firefox but it doesn't seem to work for other browsers. In Chrome, IE and Edge, the vertical line is not placed in the center of the scale. Additionally, the checkbox symbol is not centered in Chrome.
Is there a better way to do this?
https://jsfiddle.net/tzuyya36/1/
input[type="radio"] {
display: none;
}
input[type="radio"]+label:before {
font: 12px/16px sans-serif;
text-align: center;
vertical-align: middle;
content: "\00a0";
width: 16px;
height: 16px;
margin: 0;
padding: 0;
position: absolute;
border: 2px solid #8b8d8e;
background: #ffffff;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
display: inline-block;
}
input[type="radio"]:checked+label:before {
content: "\26ab";
}
label.scale1 {
cursor: pointer;
margin: 0;
position: absolute;
left: -8px;
}
label.scale2 {
cursor: pointer;
margin: 0;
position: absolute;
left: 82px;
}
label.scale3 {
cursor: pointer;
margin: 0;
position: absolute;
left: 172px;
}
label.scale4 {
cursor: pointer;
margin: 0;
position: absolute;
left: 262px;
}
label.scale5 {
cursor: pointer;
margin: 0;
position: absolute;
left: 352px;
}
label.scale6 {
cursor: pointer;
margin: 0;
position: absolute;
left: 442px;
}
label.scale7 {
cursor: pointer;
margin: 0;
position: absolute;
left: 532px;
}
div.scale {
margin: 20px auto;
width: 540px;
height: 16px;
position: relative;
}
div.leftLabel {
text-align: right;
width: 100px;
position: absolute;
left: -120px;
}
div.rightLabel {
text-align: left;
width: 100px;
position: absolute;
left: 560px;
}
hr.horizontal {
width: 100%;
position: absolute;
border: 2px solid #8b8d8e;
}
hr.vertical {
width: 30px;
position: absolute;
left: 257px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
border: 2px solid #8b8d8e;
}
<form>
<div class="scale">
<hr class="horizontal">
<hr class="vertical">
<div class="leftLabel">low</div>
<input type="radio" name="test" id="test1" value="1"><label for="test1" class="scale1"></label>
<input type="radio" name="test" id="test2" value="2"><label for="test2" class="scale2"></label>
<input type="radio" name="test" id="test3" value="3"><label for="test3" class="scale3"></label>
<input type="radio" name="test" id="test4" value="4"><label for="test4" class="scale4"></label>
<input type="radio" name="test" id="test5" value="5"><label for="test5" class="scale5"></label>
<input type="radio" name="test" id="test6" value="6"><label for="test6" class="scale6"></label>
<input type="radio" name="test" id="test7" value="7"><label for="test7" class="scale7"></label>
<div class="rightLabel">high</div>
</div>
</form>
Instead of trying to use a symbol which may change in appearance depending on operating system, font etc. I would use another pseudo element. This way you have complete control over the appearance.
To centre the vertical line you would use left: 50%, this way the width of parent is irrelevant, and margin-left: -15px, half the width of the element.
input[type="radio"] {
display: none;
}
input[type="radio"]+label:before {
font: 12px/16px sans-serif;
text-align: center;
vertical-align: middle;
content: "\00a0";
width: 16px;
height: 16px;
margin: 0;
padding: 0;
position: absolute;
border: 2px solid #8b8d8e;
background: #ffffff;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
display: inline-block;
}
input[type="radio"]:checked+label:after {
content: "";
width: 12px;
height: 12px;
margin: 4px;
position: absolute;
background: #FF0000;
border-radius: 50%;
}
label.scale1 {
cursor: pointer;
margin: 0;
position: absolute;
left: -8px;
}
label.scale2 {
cursor: pointer;
margin: 0;
position: absolute;
left: 82px;
}
label.scale3 {
cursor: pointer;
margin: 0;
position: absolute;
left: 172px;
}
label.scale4 {
cursor: pointer;
margin: 0;
position: absolute;
left: 262px;
}
label.scale5 {
cursor: pointer;
margin: 0;
position: absolute;
left: 352px;
}
label.scale6 {
cursor: pointer;
margin: 0;
position: absolute;
left: 442px;
}
label.scale7 {
cursor: pointer;
margin: 0;
position: absolute;
left: 532px;
}
div.scale {
margin: 20px auto;
width: 540px;
height: 16px;
position: relative;
}
div.leftLabel {
text-align: right;
width: 100px;
position: absolute;
left: -120px;
}
div.rightLabel {
text-align: left;
width: 100px;
position: absolute;
left: 560px;
}
hr.horizontal {
width: 100%;
position: absolute;
border: 2px solid #8b8d8e;
}
hr.vertical {
height: 30px;
position: absolute;
top: -15px;
left: 50%;
border: 2px solid #8b8d8e;
}
<form>
<div class="scale">
<hr class="horizontal">
<hr class="vertical">
<div class="leftLabel">low</div>
<input type="radio" name="test" id="test1" value="1"><label for="test1" class="scale1"></label>
<input type="radio" name="test" id="test2" value="2"><label for="test2" class="scale2"></label>
<input type="radio" name="test" id="test3" value="3"><label for="test3" class="scale3"></label>
<input type="radio" name="test" id="test4" value="4"><label for="test4" class="scale4"></label>
<input type="radio" name="test" id="test5" value="5"><label for="test5" class="scale5"></label>
<input type="radio" name="test" id="test6" value="6"><label for="test6" class="scale6"></label>
<input type="radio" name="test" id="test7" value="7"><label for="test7" class="scale7"></label>
<div class="rightLabel">high</div>
</div>
</form>
because I like flex, box shadows & gradients.
This way you can add as many inputs you want and the layout will adapt.
form {
display: flex;
}
form > div {
margin: 0 10px;
padding: 10px 0;
}
.scale {
width: 100%;
display: flex;
/* Centering the labels */
justify-content: space-between;
/* Adding the background gray line */
background:linear-gradient(transparent 45%, gray 45%, gray 55%, transparent 55%);
position: relative;
}
/* vertical rule */
.scale::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 4px;
left: 50%;
margin-left: -2px;
background: gray;
z-index: -1;
}
input {
display:none;
}
/* Direct styling of the labels as UTF8 icons can be inconsistent across browsers */
label{
display:block;
width:20px;
height: 20px;
background-color: white;
border: 2px solid gray;
border-radius: 100%;
}
input:checked+label {
/* Inset box-shadows can be used to create additional borders */
box-shadow: inset 0 0 0 2px white;
background-color: gray;
}
<form>
<div>low</div>
<div class="scale">
<input type="radio" name="test" id="test1"><label for="test1"></label>
<input type="radio" name="test" id="test2" checked><label for="test2"></label>
<input type="radio" name="test" id="test3"><label for="test3"></label>
<input type="radio" name="test" id="test4"><label for="test4"></label>
<input type="radio" name="test" id="test5"><label for="test5"></label>
</div>
<div>high</div>
</form>
Don't use hard-coded pixel values, use % here as they are uniformly distributed.
Make 3 divisions. Left label, right label and middle scale. Middle scale is the main focus and left right labels can be done separately.
.scaleContainer {
position: relative;
width: 100%;
}
div.horizontal {
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 3px;
background-color: gray;
position: absolute;
}
div.vertical {
width: 2px;
height: 20px;
background-color: gray;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input[type="radio"] {
margin: 0;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
input[type="radio"]:nth-of-type(1) {
left: calc(100% * 0 / 6)
}
input[type="radio"]:nth-of-type(2) {
left: calc(100% * 1 / 6)
}
input[type="radio"]:nth-of-type(3) {
left: calc(100% * 2 / 6)
}
input[type="radio"]:nth-of-type(4) {
left: calc(100% * 3 / 6)
}
input[type="radio"]:nth-of-type(5) {
left: calc(100% * 4 / 6)
}
input[type="radio"]:nth-of-type(6) {
left: calc(100% * 5 / 6)
}
input[type="radio"]:nth-of-type(7) {
left: calc(100% * 6 / 6)
}
.scale>div {
display: table-cell;
}
.scale>div:first-child,
.scale>div:last-child {
padding: 10px;
}
<form>
<div class="scale">
<div class="leftLabel">low</div>
<div class="scaleContainer">
<div class="horizontal"></div>
<div class="vertical"></div>
<input type="radio" value="1">
<input type="radio" value="2">
<input type="radio" value="3">
<input type="radio" value="4">
<input type="radio" value="5">
<input type="radio" value="6">
<input type="radio" value="7">
</div>
<div class="rightLabel">high</div>
</div>
</form>
Made the following pen which is working just fine in any of the up to date browsers (incl. IE11) on a Windows PC. Could anyone tell me why is it not working on a Mac?
as in why exactly does :focus work differently and how does it work differently (it actually works in Chrome on Mac; but not on Safari & Firefox)
.fs_container {
width: 12rem;
position: relative;
}
#dropdown {
opacity: 0;
position: absolute;
z-index: -1;
}
.fs_select {
border: 1px solid grey;
padding: 5px 10px;
width: 100%;
display: block;
box-sizing: border-box;
border-radius: 3px;
background: white;
position: relative;
z-index: 0;
}
.blocker {
position: absolute;
top: 0;
left: 0;
background: transparent;
z-index: -2;
}
.fs_dropdown {
opacity: 0;
list-style: none;
padding: 0;
border: 1px solid grey;
border-top: none;
width: 100%;
box-sizing: border-box;
margin: 0;
border-radius: 3px;
}
.fs_dropdown label {
background: #FF530D;
padding: 4px 10px;
box-sizing: border-box;
width: 100%;
display: block;
border-bottom: 2px dashed #E82C0C;
}
.fs_dropdown li:last-of-type label {
border-bottom: none;
}
#dropdown:focus ~ ul {
opacity: 1;
}
#dropdown:focus ~ div.blocker {
z-index: 2;
}
.fs_selections input {
opacity: 0;
position: absolute;
z-index: -1;
}
.fs_selections label.selected {
position: absolute;
top: 1px;
left: 2px;
padding: 5px 10px;
width: 90%;
box-sizing: border-box;
opacity: 0;
background: white;
}
.fs_selections input:checked + label.selected {
opacity: 1;
}
<div class="fs_container">
<input type="checkbox" id="dropdown" />
<label for="dropdown" class="fs_select">Select</label>
<div class="fs_select blocker"> </div>
<ul class="fs_dropdown">
<li><label for="fa">Option a</label></li>
<li><label for="fb">Option b</label></li>
<li><label for="fc">Option c</label></li>
</ul>
<div class="fs_selections">
<input type="radio" value="Option a" name="languages" id="fa" />
<label for="dropdown" class="selected">Option a</label>
<input type="radio" value="Option b" name="languages" id="fb" />
<label for="dropdown" class="selected">Option b</label>
<input type="radio" value="Option c" name="languages" id="fc" />
<label for="dropdown" class="selected">Option c</label>
</div>
</div>
What is the best way to give a different color of my radio button as well the border color?
I tried using this code but it does not seem to work perfectly.
li.payment_method_bacs input[type='radio']:checked:before {
background: black !important;
content: "";
display: block;
position: relative;
top: 19px;
left: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 3px solid black;
}
li.payment_method_bacs input[type='radio']:checked:before {
background: black !important;
content: "";
display: block;
position: relative;
top: 19px;
left: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 3px solid black;
}
<input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" checked="checked">
You are applying :after and :before on the input element which is invalid with css. So you need to wrap other things like a div to achieve this. The div will use the checked value of radio and with :after and :before element will do the thing as needed. I am using 2 approaches.
Approach 1: using div as faux element:
li {
list-style: none; display:inline-block; margin-right:20px;
}
.radioBox {
position: relative;
background: transparent;
z-index: 1;
width: 13px;
height: 13px;
cursor: pointer;
}
.radioBox>div {
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 13px;
height: 13px;
display: inline-block;
border: 2px solid black;
border-radius: 12px;
}
.radioBox>input {
position: absolute;
z-index: 2;
width: 13px;
height: 13px;
opacity: 0;
}
.radioBox > input:checked + div:after {
position: absolute;
content: " ";
font-size: 0;
display: block;
left: 1px;
top: 1px;
width: 10px;
height: 10px;
background: black;
border-radius: 10px;
}
<ul>
<li class="payment_method_bacs">
<div class="radioBox "><input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" >
<div></div>
</div>
</li>
<li>
<div class="radioBox ">
<input id="payment_method_bacs1" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" checked="checked" >
<div></div>
</div>
</li>
</ul>
Approach 2 : Using label as faux element.
ul,li{list-style:none; display:inline-block;}
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #fff;
border:1px solid #000;
border-radius:50%;
}
.radio label:before {
border-radius: 8px;
}
input[type=radio]:checked + label:before {
content: "\2022";
color: #000;
font-size: 30px;
text-align: center;
line-height: 18px;
}
<ul>
<li>
<div class="radio">
<input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" checked="checked">
<label for="payment_method_bacs">Visa</label>
</div>
</li>
<li>
<div class="radio">
<input id="payment_method_bacs1" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" >
<label for="payment_method_bacs1">Paypal</label>
</div>
</li>
</ul>
add html in input and lable tag input will be hide if check box will check than you can add style anything in lable
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label::before {
background: red none repeat scroll 0 0;
border: 0 solid #333;
content: "";
font-size: 0;
height: 20px;
width: 20px;
}
<span class="input-lif in-lidt">
<input class="contact_radio" id="rbsrt1" name="contact" value="individual" checked="checked" type="radio">
<label for="rbsrt1"> Individual </label>
</span>
Changing the appearance of form inputs it's a little bit tricky, as each browser renders them in a different manner.
To ensure you get the same result for different browsers, you might consider using an image (inline, or as a background image for the element containing the input) or an element, as your input display.
<label id="myLabel" for="payment_method_bacs">
<input id="payment_method_bacs"
type="radio"
class="input-radio"
name="payment_method"
value="bacs"
data-order_button_text=""
checked="checked">
</label>
#myLabel{
width: 20px;
height: 20px;
background: white;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border:2px solid #ccc;
display:inline-block;
}
#myLabel input{
display:none;
}
Fiddle provided here: https://jsfiddle.net/omfv8qhj/
I need to create a custom checkbox using only html and CSS. So far I have:
HTML/CSS:
.checkbox-custom {
opacity: 0;
position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
content: '';
background: #fff;
border-radius: 5px;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "";
display: inline-block;
width: 1px;
height: 5px;
border: solid blue;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-radius: 0px;
margin: 0px 15px 5px 5px;
}
<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
<input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
<label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>
The checked checkbox should be a checkmark with the square bordered around it instead of just a checkmark. Searching for answers, I have only found cases where the checkmark is displayed using a UTF-8 character or an image. I am not able to use either of these for what I am trying to accomplish. I am only able to use plain CSS and HTML. Any suggestions?
codepen here: http://codepen.io/alisontague/pen/EPXagW?editors=110
The problem is that you are using the same pseudo element for the square border and the checkmark. The simple solution would be to continue using the :before pseudo element for the border, and then use an :after pseudo element for the checkmark.
Updated Example
You would have to absolutely position the :after pseudo element relative to the parent .checkbox-custom label element.
Here is the updated code:
.checkbox-custom {
display: none;
}
.checkbox-custom-label {
display: inline-block;
position: relative;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
content: '';
background: #fff;
border-radius: 5px;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 10px; height: 10px;
padding: 2px; margin-right: 10px;
}
.checkbox-custom:checked + .checkbox-custom-label:after {
content: "";
padding: 2px;
position: absolute;
width: 1px;
height: 5px;
border: solid blue;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
top: 2px; left: 5px;
}
<h3>Checkboxes</h3>
<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
<input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
<label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>
My previous answer is wrong because it uses the ::before pseudo-element selector on an element that isn't a container. Thanks to #BoltClock for pointing out my error. So, I came up with another solution that uses the Checkbox Hack and the CSS3 sibling selector (~).
Demo at CodePen
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
input[type=checkbox] ~ label::before {
content: '\2713';
display: inline-block;
text-align: center;
color: white;
line-height: 1em;
width: 1em;
height: 1em;
border: 1px inset silver;
border-radius: 0.25em;
margin: 0.25em;
}
input[type=checkbox]:checked ~ label::before {
color: black;
}
<form name="checkbox-form" id="checkbox-form">
<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
<input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
<label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>
</form>
I didn't use StackOverflow's "Run Code-Snippet" functionality because it does something weird when I run it. I think it's because of the checkbox hack.
Custom checkbox using only HTML and CSS along with three checkbox states (checked, unchecked and half checked or unchecked(if it's used in a group of checkboxes))
<label class="checkboxcontainer"> one
<input type="checkbox">
<span class="checkmark"></span>
</label>
.checkboxcontainer input {
display: none;
}
.checkboxcontainer {
display: inlin-block;
padding-left: 30px;
position: relative;
cursor: pointer;
user-select: none;
}
.checkboxcontainer .checkmark {
display: inlin-block;
width: 25px;
height: 25px;
background: #eee;
position: absolute;
left: 0;
top: 0;
}
.checkboxcontainer input:checked+.checkmark {
background-color: #2196fc;
}
.checkboxcontainer input:checked+.checkmark:after {
content: "";
position: absolute;
height: 4px;
width: 9px;
border-left: 3px solid white;
border-bottom: 3px solid white;
top: 45%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.checkboxcontainer input:indeterminate+.checkmark:after {
content: "";
position: absolute;
height: 0px;
width: 9px;
border-left: 3px solid white;
border-bottom: 3px solid white;
top: 45%;
left: 50%;
transform: translate(-50%, -50%) rotate(180deg);
}
Jsfiddle: Demo
.checkbox-custom {
position: relative;
}
.checkbox-custom input[type=checkbox] {
display: none;
}
.checkbox-custom input[type=checkbox]~b {
cursor: pointer;
outline: 0;
position: relative;
display: inline-block;
margin: 4px 1px 0;
background-color: #ffffff;
border: 2px solid #ad823a;
width: 24px;
height: 24px;
vertical-align: middle;
line-height: 1;
text-align: center;
font-size: 20px;
color: #ad823a;
}
.checkbox-custom input[type=checkbox]:checked~b:after {
content: '\2713';
}
<div class="checkbox-custom">
<label>
<input type="checkbox">
<b></b>
<span>app 1</span>
</label>
</div>
<div class="checkbox-custom">
<label>
<input type="checkbox">
<b></b>
<span>app 1</span>
</label>
</div>