Add CSS to HTML checkbox - html

I have encountered some problem with my site. I want to add CSS to my button to be something like this which I found on the web. https://codepen.io/AllThingsSmitty/pen/WjZVjo
I can't add an ID to it as I can't change the HTML code as it is auto generated by Wordpress. Any help would be appreciated.
<label class='grunion-field-label checkbox'>
<input type='checkbox' name='g84-iagreetothetermsconditions' value='Yes' class='checkbox' required aria-required='true' />
I agree to the Terms & Conditions. <span>(required)</span>
</label>

With your current DOM structure you go with following snippet:
.grunion-field-label {
position: relative;
display:inline-block;
padding-left:10px;
line-height:30px;
}
.grunion-field-label::before {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
height: 28px;
left: 0;
position: absolute;
top: 0;
width: 28px;
content:"";
}
.grunion-field-label input[type="checkbox"] + span::after {
border: 2px solid #fff;
border-top: none;
border-right: none;
content: "";
height: 6px;
left: 7px;
opacity: 0;
position: absolute;
top: 8px;
transform: rotate(-45deg);
width: 12px;
}
.grunion-field-label input[type="checkbox"] {
visibility: hidden;
}
.grunion-field-label input[type="checkbox"]:checked + span::after {
border-color: #f00;
opacity: 1;
}
<label class='grunion-field-label checkbox'>
<input type='checkbox' name='g84-iagreetothetermsconditions' value='Yes' class='checkbox' required aria-required='true' />
I agree to the Terms & Conditions. <span>(required)</span>
</label>

You may add external css to re-style the checkbox and also you may need to get some help from javascript.
(function($) {
$('input[type="checkbox"]').on('click', function() {
if ($(this).is(':checked')) {
$(this).closest('label').addClass('checked');
} else {
$(this).closest('label').removeClass('checked');
}
});
})(jQuery);
.grunion-field-label.checkbox {
position: relative;
padding-left: 24px;
}
.grunion-field-label.checkbox input[type="checkbox"] {
display: none;
}
.grunion-field-label.checkbox:before {
content: " ";
position: absolute;
left: 0;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #fff;
border: 1px solid #ddd;
}
.grunion-field-label.checkbox.checked:after {
content: " ";
position: absolute;
top: 4px;
left: 8px;
border: 2px solid #fff;
border-left: none;
border-top: none;
width: 4px;
height: 8px;
transform: rotate(45deg);
}
.grunion-field-label.checkbox.checked:before {
background-color: #0c0;
border-color: #0c0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class='grunion-field-label checkbox'>
<input type='checkbox' name='g84-iagreetothetermsconditions' value='Yes' class='checkbox' required aria-required='true' />
I agree to the Terms & Conditions. <span>(required)</span>
</label>

Related

Change radio button outer border color and thickness

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>

How to create a tick mark in a custom checkbox?

I want to make a custom checkbox with CSS, but not sure how do it.
.custom-checkbox {
border: 3px solid #7e8a94;
float: right;
height: 20px;
width: 20px;
border-radius: 5px;
cursor: pointer;
display: inline-block;
}
.custom-checkbox.hover {
border: 3px solid #43D8B0;
}
.custom-checkbox.active {
border: 3px solid #43D8B0;
}
.custom-checkbox.active.checkmark {}
<input type='checkbox' class='checkbox'>
<div class="custom-checkbox">
<div class="checkmark"></div>
</div>
I added active class to custom-checkbox on checking, but not sure how to create a tick inside a box then?
You have to manually customize your input & add a label in a way using pseudo elements to get the desired effect in the checkbox you want here.
Also, you can use content: '✔'; in your css to provide a tick on click.
I built you a demo to refer to, check the following code:
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked)+label,
[type="checkbox"]:checked+label {
position: relative;
padding-left: 25px;
cursor: pointer;
}
[type="checkbox"]:not(:checked)+label:before,
[type="checkbox"]:checked+label:before {
content: '';
position: absolute;
left: 0;
top: -5px;
width: 40px;
height: 40px;
background: #fff;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1);
border-radius: 50%;
background-color: #5cf1b3;
outline: none;
}
[type="checkbox"]:not(:checked)+label:after,
[type="checkbox"]:checked+label:after {
content: '✔';
position: absolute;
top: 8px;
left: 10px;
font-size: 24px;
line-height: 0.8;
color: #fff;
transition: all .2s;
}
[type="checkbox"]:not(:checked)+label:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked+label:after {
opacity: 1;
transform: scale(1);
}
<p>
<input type="checkbox" id="test1" />
<label for="test1"></label>
</p>
You will need to use :checked pseudo class for it. In the following example it's using a span tag to create the custom checkbox style, and using a pseudo element :before with a special character ✔ inside for the tick.
.custom-checkbox input {
display: none;
}
.custom-checkbox span {
border: 3px solid #7e8a94;
float: right;
height: 20px;
width: 20px;
border-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.custom-checkbox:hover span,
.custom-checkbox input:checked + span {
border: 3px solid #43D8B0;
}
.custom-checkbox input:checked + span:before {
content: "✔";
}
<label class="custom-checkbox">
<input type="checkbox">
<span></span>
</label>
You can check custom checkbox in different-different states below snippet
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 1.95em;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left: 0; top: 0;
width: 1.25em; height: 1.25em;
border: 2px solid #ccc;
background: #fff;
border-radius: 4px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '✔';
position: absolute;
top: .1em; left: .3em;
font-size: 1.3em;
line-height: 0.8;
color: #09ad7e;
transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
box-shadow: none;
border-color: #bbb;
background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
color: #999;
}
[type="checkbox"]:disabled + label {
color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
border: 2px dotted blue;
}
/* hover style just for information */
label:hover:before {
border: 2px solid #4778d9!important;
}
<p>
<input type="checkbox" id="test1" />
<label for="test1">Red</label>
</p>
<p>
<input type="checkbox" id="test2" checked="checked" />
<label for="test2">Yellow</label>
</p>
<p>
<input type="checkbox" id="test3" checked="checked" disabled="disabled" />
<label for="test3">Green</label>
</p>
<p>
<input type="checkbox" id="test4" disabled="disabled" />
<label for="test4">Brown</label>
</p>

Multiple Checkboxes, Only One Is Selectable

So I have these checkboxes on a page, but no matter which one I click on, only the first one gets the check mark. I have no idea what the problem is. At first I was having the problem that the checkbox wouldn't show up as checked, but now it's just the first one that is getting selected. There is a button on the page that selects all the boxes, and that works, it is just when a user tries to select one that it does't work.
Code
.checkbox {
margin: 3px auto;
width: 25px;
position: relative;
}
.checklabel {
cursor: pointer;
position: absolute;
width: 25px;
height: 25px;
top: 0;
left: 0;
background: #eee;
border:1px solid #ddd;
}
.checkbox .checklabel:after {
opacity: 0.2;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 6px;
left: 7px;
border: 3px solid #333;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
.checklabel:hover::after {
opacity: .5;
}
.checkbox input[type=checkbox]:checked + .checklabel:after {
opacity: 1;
}
<td><div class="checkbox"><input class="check" id="check" type="checkbox"><label class="checklabel" for="check"></label></div></td>
<td><div class="checkbox"><input class="check" id="check" type="checkbox"><label class="checklabel" for="check"></label></div></td>
An id may only be used once per page, and the for attribute of your label needs to reference the unique id for the input you want it to control.
.checkbox {
margin: 3px auto;
width: 25px;
position: relative;
}
.checklabel {
cursor: pointer;
position: absolute;
width: 25px;
height: 25px;
top: 0;
left: 0;
background: #eee;
border: 1px solid #ddd;
}
.checkbox .checklabel:after {
opacity: 0.2;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 6px;
left: 7px;
border: 3px solid #333;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
.checklabel:hover::after {
opacity: .5;
}
.checkbox input[type=checkbox]:checked + .checklabel:after {
opacity: 1;
}
<td>
<div class="checkbox"><input class="check" id="check" type="checkbox"><label class="checklabel" for="check"></label></div>
</td>
<td>
<div class="checkbox"><input class="check" id="check2" type="checkbox"><label class="checklabel" for="check2"></label></div>
</td>

CSS Pseudo elements positioning issue

I am facing an issue with positioning and alignment of pseudo elements. I have pasted the snippet below. Could you please tell me why the elements are overlapping and how to get them to appear next to each other without the overlap?
.switch {
display: inline-block;
margin-right: 15px;
}
.switch label {
position: relative;
cursor: pointer;
}
.switch input[type="checkbox"] + label::before {
position: absolute;
display: inline-block;
content: '';
height: 18px;
width: 33px;
border: 1px solid gray;
border-radius: 9px;
background-color: gray;
top: 2px;
right: -50px;
}
.switch input[type="checkbox"]:checked + label::before {
border: 1px solid red;
background-color: red;
right: -50px;
}
.switch input[type="checkbox"] + label::after {
position: absolute;
display: inline-block;
content: '';
height: 14px;
width: 14px;
border: 1px solid white;
border-radius: 50%;
background-color: white;
top: 4px;
right: -33px;
}
.switch input[type="checkbox"]:checked + label::after {
right: -48px;
}
.switch input[type="checkbox"] {
display: none;
}
<div class="switch">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Lorem ipsum Test</label>
</div>
<div class="switch">
<input type="checkbox" id="checkbox2">
<label for="checkbox2">Test1</label>
</div>
<div class="switch">
<input type="checkbox" id="checkbox3">
<label for="checkbox3">Lorem ipsum Test2</label>
</div>
They overlap because position: absolute takes elements out of the normal flow:
In the absolute positioning model, a box is explicitly offset with
respect to its containing block. It is removed from the normal flow
entirely (it has no impact on later siblings). [...] the contents of
an absolutely positioned element do not flow around any other boxes.
They may obscure the contents of another box (or be obscured
themselves)
You can add some margin to fix that:
.switch label {
margin-right: 50px;
}
.switch {
display: inline-block;
margin-right: 15px;
}
.switch label {
display: block;
margin-right: 50px;
position: relative;
cursor: pointer;
}
.switch input[type="checkbox"] + label::before {
position: absolute;
display: inline-block;
content: '';
height: 18px;
width: 33px;
border: 1px solid gray;
border-radius: 9px;
background-color: gray;
top: 2px;
right: -50px;
}
.switch input[type="checkbox"]:checked + label::before {
border: 1px solid red;
background-color: red;
right: -50px;
}
.switch input[type="checkbox"] + label::after {
position: absolute;
display: inline-block;
content: '';
height: 14px;
width: 14px;
border: 1px solid white;
border-radius: 50%;
background-color: white;
top: 4px;
right: -33px;
}
.switch input[type="checkbox"]:checked + label::after {
right: -48px;
}
.switch input[type="checkbox"] {
display: none;
}
<div class="switch">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Lorem ipsum Test</label>
</div>
<div class="switch">
<input type="checkbox" id="checkbox2">
<label for="checkbox2">Test1</label>
</div>
<div class="switch">
<input type="checkbox" id="checkbox3">
<label for="checkbox3">Lorem ipsum Test2</label>
</div>
When an element is absolutely positioned it gets out of the normal flow. This means that it does not affect other elements with its dimensions/positioning.
A solution is to take into consideration its dimensions/positioning in the container element (the label in this case)
So giving a padding-right:50px to the label and positioning the pseudo-elements accordingly will fix it.
Updated code
.switch {
display: inline-block;
margin-right: 15px;
}
.switch label {
position: relative;
cursor: pointer;
padding-right:50px;
}
.switch input[type="checkbox"] + label::before {
position: absolute;
display: inline-block;
content: '';
height: 18px;
width: 33px;
border: 1px solid gray;
border-radius: 9px;
background-color: gray;
top: 2px;
right: 0;
}
.switch input[type="checkbox"]:checked + label::before {
border: 1px solid red;
background-color: red;
right: 0;
}
.switch input[type="checkbox"] + label::after {
position: absolute;
display: inline-block;
content: '';
height: 14px;
width: 14px;
border: 1px solid white;
border-radius: 50%;
background-color: white;
top: 4px;
right: 17px;
}
.switch input[type="checkbox"]:checked + label::after {
right: 2px;
}
.switch input[type="checkbox"] {
display: none;
}
<div class="switch">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Lorem ipsum Test</label>
</div>
<div class="switch">
<input type="checkbox" id="checkbox2">
<label for="checkbox2">Test1</label>
</div>
<div class="switch">
<input type="checkbox" id="checkbox3">
<label for="checkbox3">Lorem ipsum Test2</label>
</div>

Custom checkbox using only CSS and HTML

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>