.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
}
input {
position: absolute;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
input:checked ~ .checkmark {
background-color: #2196f3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
input:checked ~ .checkmark:after {
display: block;
}
.checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Custom Radio Buttons</h1>
<label class="container"
>One
<input type="radio" checked="checked" name="radio" />
<span class="checkmark"></span>
</label>
<label class="container"
>Two
<input type="radio" name="radio" />
<span class="checkmark"></span>
</label>
</body>
</html>
I want to customize radio button. So, I put it in a container with input and span .checkmark as sibling. What I don't understand is, span is not input type but it can also be checked. Please, someone explain. I understand the code as when I check input radio will change style of span.
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 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>
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 want to style radio input INSIDE "label" tags. I already changed the background color, however when im clicking on my radio white dot inside doesn't show up. I wrote a code for that and I really don't know what the problem is.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
display:block;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 17px;
height: 17px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #ff7900;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
border-radius: 8px;
}
input[type=radio]:checked + label:before {
content: "\2022";
color: #f3f3f3;
font-size: 30px;
text-align: center;
line-height: 18px;
position: absolute;
}
.input {
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<form>
<label class="input"><input type="radio" name="number" class="hehe">xxxxxxxx</label>
<label class="input" ><input type="radio" name="number" class="hehe">xxxxxxx</label>
<label class="input"><input type="radio" name="number" class="hehe">xxxxxxx</label>\
<label class="input"><input type="radio" name="number" class="hehe">xxxxxxx</label>
</form>
</body>
</html>
This:
input[type=radio]:checked + label:before
requires that the label immediately follow the input.
However, your HTML is
<label class="input"><input type="radio" name="number" class="hehe">xxxxxxxx</label>
The label surrounds the input and so the selector will not work.
You would need
<input type="radio" name="number" class="hehe"/><label class="input">xxxxxxxx</label>
Alternatively; use a pseudo-element on a span inside the label rather than the label itself
<label class="input">
<input type="radio" name="number" class="hehe">
<span>xxxxxxxx</span>
</label>
with
input[type=radio]:checked + span:before
You can try this code.
What Paulie said is correct.
label {
display: inline-block;
vertical-align: middle;
margin-left: 30px;
cursor: pointer;
}
input[type="radio"] {
display: none;
}
input[type=radio] + label:before {
content: '';
width: 24px;
height: 24px;
background: tomato;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
z-index: 5;
position: absolute;
top: 0;
left: 0;
}
input[type=radio]:checked + label:after {
content: '';
width: 16px;
height: 16px;
background: white;
border-radius: 50%;
display: inline-block;
z-index: 10;
position: absolute;
top: 4px;
left: 4px;
}
div {
margin-bottom: 15px;
position: relative;
}
<div>
<input type="radio" name="test" id="one">
<label for="one">XXXXXXXXXXXX</label>
</div>
<div>
<input type="radio" name="test" id="two">
<label for="two">xxxx</label>
</div>
<div>
<input type="radio" name="test" id="three" checked>
<label for="three">xxxxxxxxxxxxx</label>
</div>
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>