I have a long form. Inside there is a color picking radio button
How can I make a css exception for this radio without effecting all other radio's?
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>
You could wrap that entity in a container and specify the class for it.
Below is a sample code from 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>
Just add a class called exemption and then allow the CSS to be applied only if the class is present at the top most level, thus your other radio buttons are not affected. I have made the radio button color picker work, please let me know what's missing in this!
.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>
Related
/* 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;
cursor: pointer;
height: 0;
width: 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);
}
<!DOCTYPE html>
<html>
<body>
<h1>Custom Checkboxes</h1>
<div class="container">
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
<label>One</label>
</div>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
</body>
</html>
I would like to arrange the label tag on the same level and after the input tag. So I could give it a css tag, when the input tag is disabled. I can't figure out, how to do it. So I can give the label tag a opacity, when the input tag is disabled.
I tried it with a div, and arrange the label after the input or the span tag. But it doesn't work.
First Checkbox don't work, because I changed the label tag. But this is what I'd like to have.
Wrap your input & span into a label
<h1>Custom Checkboxes</h1>
<div class="container">
<label for="one">One
<input id="one" type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
https://jsfiddle.net/lalji1051/xtn3esqu/5/
You have to use position: absolute; for the label to make the clickable space larger.
/* The container */
.container {
display: block;
position: relative;
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;
cursor: pointer;
height: 0;
width: 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);
}
/* Additional styles */
.check-wrapper {
position: relative;
width: 100px;
}
label[for="check1"] {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding-left: 30px;
cursor: pointer;
/* outline to see the difference */
border: 1px solid red;
}
<h1>Custom Checkboxes</h1>
<div class="container">
<!-- added a wrapper -->
<div class="check-wrapper">
<input id="check1" type="checkbox" checked="checked">
<span class="checkmark"></span>
<label for="check1">One</label>
</div>
</div>
Hope this helps
.customCheckBox__Wrapper {
display: flex;
width: auto;
flex-flow: row wrap;
flex-basis: auto;
position: relative;
box-sizing: border-box;
margin: 0.125em;
}
.customCheckBox__Wrapper * {
box-sizing: border-box;
}
.cstumLbl_ {
transition: all 200ms ease-in-out;
content: "";
display: flex;
flex: 0 auto auto;
padding: 0.125em 0.5em;
width: 100%;
position: relative;
line-height: 1.4em;
padding-left: 2.5em;
}
.cstumLbl_:hover {
cursor: pointer;
}
.glyp_checked {
display: block;
opacity: 1;
width: 24px;
height: 24px;
position: absolute;
left: 6.5px;
top: 0.5px;
fill: #ffffff;
z-index: 200;
margin-right: 1.75em;
border: 1px solid #808080;
transition: all 200ms ease-in-out;
}
.cstumChxBx_ {
display: inline;
position: absolute;
z-index: -10;
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
left: 50%;
top: 50%;
}
.cstumChxBx_:checked+.cstumLbl_._SplCse__>.glyp_checked,
.cstumChxBx_:checked+.cstumLbl_._NrmlCse__>.glyp_checked,
.cstumChxBx_:checked+.cstumLbl_._RgsCse__>.glyp_checked {
display: block;
opacity: 1;
border-radius: 2px;
}
.cstumChxBx_:checked+.cstumLbl_._SplCse__>.glyp_checked {
background: #000080;
fill: #ffffff;
}
.cstumChxBx_:checked+.cstumLbl_._NrmlCse__>.glyp_checked {
background: #ffffff;
fill: #000000;
border-color: #000080;
}
.cstumChxBx_:checked+.cstumLbl_._RgsCse__>.glyp_checked {
background: #008080;
fill: #ffffff;
}
.cstumChxBx_:disabled+.cstumLbl_._SplCse__>.glyp_checked,
.cstumChxBx_:disabled:checked+.cstumLbl_._SplCse__>.glyp_checked,
.cstumChxBx_:disabled+.cstumLbl_._NrmlCse__>.glyp_checked,
.cstumChxBx_:disabled:checked+.cstumLbl_._NrmlCse__>.glyp_checked,
.cstumChxBx_:disabled+.cstumLbl_._RgsCse__>.glyp_checked,
.cstumChxBx_:disabled:checked+.cstumLbl_._RgsCse__>.glyp_checked {
background: rgba(120, 120, 120, 0.25);
border: 1px solid #787878;
display: block;
opacity: 0.2;
fill: #3f3f3f;
}
<svg style="display:none;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<symbol viewBox="0 0 24 24" id="checked_">
<path d="M18,6l-7.8,7.8c-0.4,0.4-1,0.4-1.4,0L6,10.9c-0.4-0.4-1-0.4-1.4,0l-0.7,0.7c-0.4,0.4-0.4,1,0,1.4l3.5,3.5l0,0L8.8,18
c0.4,0.4,1,0.4,1.4,0l9.9-9.9c0.4-0.4,0.4-1,0-1.4L19.4,6C19,5.6,18.4,5.6,18,6z"/>
</symbol>
</svg>
<span class="customCheckBox__Wrapper">
<input class="cstumChxBx_" disabled checked type="checkbox" id="normal_" />
<label class="cstumLbl_ _SplCse__" for="normal_">
<span class="glyp_checked">
<svg viewBox="0 0 24 24">
<use xlink:href="#checked_"/>
</svg>
</span>
<span>label 1</span>
</label>
</span>
<span class="customCheckBox__Wrapper">
<input class="cstumChxBx_" type="checkbox" id="Normal__" />
<label class="cstumLbl_ _NrmlCse__" for="Normal__">
<span class="glyp_checked">
<svg viewBox="0 0 24 24">
<use xlink:href="#checked_"/>
</svg>
</span>
<span>label 2</span>
</label>
</span>
<span class="customCheckBox__Wrapper">
<input class="cstumChxBx_" type="checkbox" id="intermediate_" />
<label class="cstumLbl_ _RgsCse__" for="intermediate_">
<span class="glyp_checked">
<svg viewBox="0 0 24 24">
<use xlink:href="#checked_"/>
</svg>
</span>
<span>label 3</span>
</label>
</span>
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
/* 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;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 5px;
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>
</head>
<body>
<div class="container">
<h1>Custom Checkboxes</h1>
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I want to create my own radio buttons, but it seems I cant restyle them.
I got the following html:
.segment {
all: unset;
position: relative;
border: solid 1px blue;
height: 2rem;
width: 3rem;
-webkit-tap-highlight-color: transparent;
}
<div>
<input id="segemnt0" class="segment" type="radio" name="segment">
<input id="segemnt1" class="segment" type="radio" name="segment">
<input id="segemnt2" class="segment" type="radio" name="segment">
</div>
This isn't working. Nothing displays at all. If I remove the "all: unset;" it just displays the normal styled checkbox without borders etc...
You can customise radio buttons adding <label> tag and CSS
Here is the fiddle this might help you:
[type="radio"]:checked,
[type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
[type="radio"]:checked+label,
[type="radio"]:not(:checked)+label {
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
}
[type="radio"]:checked+label:before,
[type="radio"]:not(:checked)+label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid #ddd;
border-radius: 100%;
background: #fff;
}
[type="radio"]:checked+label:after,
[type="radio"]:not(:checked)+label:after {
content: '';
width: 12px;
height: 12px;
background: #F87DA9;
position: absolute;
top: 4px;
left: 4px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
[type="radio"]:not(:checked)+label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
[type="radio"]:checked+label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
<input id="segemnt0" class="segment" type="radio" name="segment">
<label for="segemnt0">one</label>
<input id="segemnt1" class="segment" type="radio" name="segment">
<label for="segemnt1">two</label>
<input id="segemnt2" class="segment" type="radio" name="segment">
<label for="segemnt2">three</label>
Try the sample with label. You need to add label in your code to style radio.
input[type=radio] {
display: none;
}
input[type=radio] + label:before {
content: '';
display: inline-block;
border: 2px solid #0F81D5;
height: 12px;
width: 12px;
border-radius: 50%;
margin: 2px 5px 0 0px
}
input[type=radio]:checked + label:before {
border-width: 5px;
height: 6px;
width: 6px;
}
<div>
<input type="radio" name="radio" id="radio1" />
<label for="radio1">radio1</label>
</div>
<div>
<input type="radio" name="radio" id="radio2" />
<label for="radio2">radio2</label>
</div>
<div>
<input type="radio" name="radio" id="radio3" />
<label for="radio3">radio3</label>
</div>
I am looking at this w3schools checkbox demo
I notice that input doesn't get checked value when checked. Is this valid html?
I tried using this with php forms and the value if "on" when checked.
.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;
cursor: pointer;
}
/* 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);
}
<h1>Custom Checkboxes</h1>
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
The value of a checkbox is whatever the value attribute says it is with (in the case of checkboxes) on as the default.
Its checked status (available via the checked property in JS) determines if it will be a successful control (i.e. appear in the submitted form data at all) or not.
Just remove checked="checked" so that that initial wont be checked
/* 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);
}
<h1>Custom Checkboxes</h1>
<label class="container">One
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
I have been working for some functionality in checkboxes, but this makes me bit confused when changing the styles of checkbox.
I tried setting the color to the checkbox after clicked, but not worked.
.container input:checked ~ .checkmark:after {
display: block;
color: #000 !important;
}
This seems to be bit easy, but somehow the tickbox color (white) cannot be changed. Can someone help me out?
Here's the code snippet.
.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;
cursor: pointer;
}
/* 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;
color: #000 !important;
}
/* 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);
}
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
The checkmark is being created using a border color, here:
.container .checkmark:after {
border: solid white;
}
So just change that color as desired:
.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;
cursor: pointer;
}
/* 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 #000;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
If you're trying to change the colour of the tick, you have to change the border colour.
.container input:checked ~ .checkmark:after {
display: block;
border-color: #000;
}
.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;
cursor: pointer;
}
/* 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;
border-color: #000;
}
/* 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);
}
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
Is there any way to make checkboxes with rounded corners using bootstrap or some css property?
Just using css, however, you lose the checkbox tick.
.checkbox-round {
width: 1.3em;
height: 1.3em;
background-color: white;
border-radius: 50%;
vertical-align: middle;
border: 1px solid #ddd;
appearance: none;
-webkit-appearance: none;
outline: none;
cursor: pointer;
}
.checkbox-round:checked {
background-color: gray;
}
<input type="checkbox" class="checkbox-round" />
.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;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 15px;
}
/* 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);
}
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
Try to do
body {
background-color: #f1f2f3;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.container {
margin: 0 auto;
}
.round {
position: relative;
}
.round label {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
height: 28px;
left: 0;
position: absolute;
top: 0;
width: 28px;
}
.round label: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;
}
.round input[type="checkbox"] {
visibility: hidden;
}
.round input[type="checkbox"]:checked + label {
background-color: #66bb6a;
border-color: #66bb6a;
}
.round input[type="checkbox"]:checked + label:after {
opacity: 1;
}
<div class="container">
<div class="round">
<input type="checkbox" id="checkbox" />
<label for="checkbox"></label>
</div>
</div>
One of the Best And Easiest Method is to use CSS clip path property:
<input type="checkbox" id="checkbox" />
<label for="checkbox" >Option</label>
input[type="checkbox"] {
width: 45px; /* Set width */
height: 45px; /* Set height */
clip-path: circle(46% at 50% 50%); /* Set the clip path of circle*/
}
if you still see some pointed corners, try reducing the first percentage values, (where I have used 46%), play with it a little bit and it will definitely work.
Well, this is the simplest and optimal solution. You set appearance to none and then use clip-path when its checked.
.rounded-checkbox {
width:35px;
height: 35px;
border-radius: 50%;
vertical-align: middle;
border: 1px solid black;
appearance: none;
-webkit-appearance: none;
outline: none;
cursor: pointer;
}
.rounded-checkbox:checked {
appearance: auto;
clip-path: circle(50% at 50% 50%);
background-color: blue;
}
<input
type="checkbox"
class="rounded-checkbox"
id="checkbox"
/> <label for="checkbox">Checkbox</label>
in css you may play with height, width, border-radius. basically height and width should be equal and border-radius should be half of them.
if you are using bootstrap you can use this class and add it where your shape or in this case your checkbox class is: class="rounded-circle"
look: borders bootstrap 5
for example to make a checkbox rounded in bootstrap 5 (also working for v4):
<div class="form-check">
<input
class="form-check-input rounded-circle"
type="checkbox"
/>
<label class="form-check-label" for="flexCheck1">
rounded checkbox
</label>
</div>
CSS
.checkbox {
clip-path: circle(46% at 50% 50%);
}
HTML
<input type="checkbox" class="checkbox" />
No need to hide the default checkbox and create a custom just set the clip-path and you can easily achieve a circular checkbox.
I thing the best way to make a rounded corners is by using the border-radius property. This site has a nice collection of checkboxes.
For example:
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
top: 0;
border-radius: 10px;
The last line(border-radius: 10px) will give you a checkbox with rounded corners.