I have a 3 state radio button.
The initial state is undetermined, Then you can disable/enable it.
The problem is when you click over the DIV. It always gets the first radio button value (OFF in this case). I would like to toggle between ON/OFF.
If you click on the labels it works correctly.
.element-toggle-container {
cursor: pointer;
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.element-toggle-switch {
display: inline-block;
border-radius: 1.5rem;
height: 1.5rem;
width: 3rem;
position: relative;
vertical-align: middle;
transition: background 0.25s;
margin: .5rem;
}
.element-toggle-switch:before,
.element-toggle-switch:after {
content: "";
}
.element-toggle-checkbox.disabled~.element-toggle-switch,
.element-toggle-checkbox:disabled~.element-toggle-switch {
cursor: not-allowed;
opacity: .65;
}
.element-toggle-switch:before {
display: block;
background: #fff;
border-radius: 50%;
position: absolute;
transition: left 0.25s;
top: 0.1875rem;
left: 0.1875rem;
width: 1.125rem;
height: 1.125rem;
}
.element-toggle-container:hover .element-toggle-switch:before {
background: #fff;
}
.element-toggle-checkbox[value="na"]:checked~.element-toggle-switch {
background: #CCCCCC;
}
.element-toggle-checkbox[value="na"]:checked~.element-toggle-switch:before {
left: 0.9375rem;
}
.element-toggle-checkbox[value="off"]:checked~.element-toggle-switch {
background: #ff0f0f;
}
.element-toggle-checkbox[value="on"]:checked~.element-toggle-switch {
background: #56c080;
}
.element-toggle-checkbox[value="on"]:checked~.element-toggle-switch:before {
left: 1.6875rem;
}
.element-toggle-checkbox {
position: absolute;
visibility: hidden;
}
<label for="element-1-off">No</label>
<label class="element-toggle-container">
<input class="element-toggle-checkbox not_uniform" id="element-1-off" value="off" name="element-1" type="radio" />
<input class="element-toggle-checkbox not_uniform" id="element-1-na" value="na" name="element-1" type="radio" checked="checked" />
<input class="element-toggle-checkbox not_uniform" id="element-1-on" value="on" name="element-1" type="radio" />
<div class="element-toggle-switch"></div>
</label>
<label for="element-1-on">Yes</label>
The issue is that the .element-toggle-container is a <label> element without a for specified and it has the <input> elements as children. This means it will relate to the first <input> child, which in this case is the 'off' button. Why not remove the .element-toggle-container altogether and extend the labels of the 'on' and 'off' buttons like in the example below?
label[for="element-1-off"],
label[for="element-1-on"] {
display: block;
position: absolute;
top: .1rem;
z-index: 10;
}
label[for="element-1-off"] {
padding-right: 1.15rem;
left: 0;
}
label[for="element-1-on"] {
padding-left: 1rem;
left: 3.5rem;
}
.toggle-switch {
position:relative;
}
.element-toggle-switch {
display: block;
border-radius: 1.5rem;
height: 1.5rem;
width: 3rem;
position: relative;
vertical-align: middle;
transition: background 0.25s;
margin: 0 1.5rem;
}
.element-toggle-switch:before,
.element-toggle-switch:after {
content: "";
}
.element-toggle-checkbox.disabled~.element-toggle-switch,
.element-toggle-checkbox:disabled~.element-toggle-switch {
cursor: not-allowed;
opacity: .65;
}
.element-toggle-switch:before {
display: block;
background: #fff;
border-radius: 50%;
position: absolute;
transition: left 0.25s;
top: 0.1875rem;
left: 0.1875rem;
width: 1.125rem;
height: 1.125rem;
}
.element-toggle-container:hover .element-toggle-switch:before {
background: #fff;
}
.element-toggle-checkbox[value="na"]:checked~.element-toggle-switch {
background: #CCCCCC;
}
.element-toggle-checkbox[value="na"]:checked~.element-toggle-switch:before {
left: 0.9375rem;
}
.element-toggle-checkbox[value="off"]:checked~.element-toggle-switch {
background: #ff0f0f;
}
.element-toggle-checkbox[value="on"]:checked~.element-toggle-switch {
background: #56c080;
}
.element-toggle-checkbox[value="on"]:checked~.element-toggle-switch:before {
left: 1.6875rem;
}
.element-toggle-checkbox {
position: absolute;
visibility: hidden;
}
<div class="toggle-switch">
<input class="element-toggle-checkbox not_uniform" id="element-1-off" value="off" name="element-1" type="radio" />
<input class="element-toggle-checkbox not_uniform" id="element-1-na" value="na" name="element-1" type="radio" checked="checked" />
<input class="element-toggle-checkbox not_uniform" id="element-1-on" value="on" name="element-1" type="radio" />
<label for="element-1-off">No</label>
<div class="element-toggle-switch"></div>
<label for="element-1-on">Yes</label>
</div>
.element-toggle-container {
cursor: pointer;
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.element-toggle-switch {
display: inline-block;
border-radius: 1.5rem;
height: 1.5rem;
width: 3rem;
position: relative;
vertical-align: middle;
transition: background 0.25s;
margin: .5rem;
}
.element-toggle-switch:before,
.element-toggle-switch:after {
content: "";
}
.element-toggle-checkbox.disabled~.element-toggle-switch,
.element-toggle-checkbox:disabled~.element-toggle-switch {
cursor: not-allowed;
opacity: .65;
}
.element-toggle-switch:before {
display: block;
background: #fff;
border-radius: 50%;
position: absolute;
transition: left 0.25s;
top: 0.1875rem;
left: 0.1875rem;
width: 1.125rem;
height: 1.125rem;
}
.element-toggle-container:hover .element-toggle-switch:before {
background: #fff;
}
.element-toggle-checkbox[value="na"]:checked~.element-toggle-switch {
background: #CCCCCC;
}
.element-toggle-checkbox[value="na"]:checked~.element-toggle-switch:before {
left: 0.9375rem;
}
.element-toggle-checkbox[value="off"]:checked~.element-toggle-switch {
background: #ff0f0f;
}
.element-toggle-checkbox[value="off"]:checked~.element-toggle-switch:before {
left: 0.2375rem;
}
.element-toggle-checkbox[value="on"]:checked~.element-toggle-switch {
background: #56c080;
}
.element-toggle-checkbox[value="on"]:checked~.element-toggle-switch:before {
left: 1.6875rem;
}
.element-toggle-checkbox {
position: absolute;
visibility: hidden;
}
Related
My problem is, they overlap each other: https://i.stack.imgur.com/ltZ8w.png
I need to do like this: https://i.stack.imgur.com/roBun.png
What can I do? I just need to line text with my input checkbox, as I showed in my picture, any suggestions?
.round {
position: relative;
margin-left: 50px;
}
.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;
text-decoration: line-through;
color: #3CC070;
}
.tasks input[type="checkbox"]:checked+label {
border-color: #66bb6a;
text-decoration: line-through;
color: #3CC070;
}
.round input[type="checkbox"]:checked+label:after {
opacity: 1;
}
<div>
<div> <input type="checkbox" class="input" checked>
<label>Make some cash</label>
</div>
<div class="round">
<input type="checkbox" id="checkbox" />
<label for="checkbox" class="text"> Make</label>
</div>
</div>
you can add pseudo Before for label and add text inside it.
remove label content <label for="checkbox" class="text"></label>
label.text:before {
content: "click";
display: inline-block;
left: 37px;
position: absolute;
top: 4px;
}
.round {
position: relative;
margin-left: 50px;
}
.round label {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
height: 28px;
left: 0;
position: absolute;
top: 0;
width: 28px;
}
label.text:before {
content: "click";
display: inline-block;
left: 37px;
position: absolute;
top: 4px;
}
.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;
text-decoration: line-through;
color: #3CC070;
}
.tasks input[type="checkbox"]:checked+label {
border-color: #66bb6a;
text-decoration: line-through;
color: #3CC070;
}
.round input[type="checkbox"]:checked+label:after {
opacity: 1;
}
<div>
<div> <input type="checkbox" class="input" checked>
<label>Make some cash</label>
</div>
<div class="round">
<input type="checkbox" id="checkbox" />
<label for="checkbox" class="text"></label>
</div>
</div>
I am designing an app in Unqork. The issue I have is how to shape the radio button to look like the regular Learn More button. I only intend to style the radio button instead of making it into a multiple choice.
The style of the regular button is
.abc-quote-option-cta {
bottom: 38px;
left: 0;
right: 0;
padding-top: 24px;
position: absolute; }
.abc-quote-option-cta:before {
background-color: #979797;
content: '';
display: block;
height: 1px;
left: 62px;
opacity: .36;
position: absolute;
right: 56px;
top: 0;
}
.abc-quote-option-cta .btn.btn-primary {
border-radius: 6px;
border: solid 2px #01a7e1;
background-color: #FFFFFF;
border-radius: 6px;
color: #01a7e1;
display: block;
font-size: 1.8rem;
line-height: 1.44;
margin: 0 auto;
padding: 10px;
text-align: center;
transition: background-color .25s ease, width .13s ease-in, color .18s ease-out ;
width: 188px;
}
.abc-quote-option-cta .btn.btn-primary:hover,
.abc-quote-option-cta .btn.btn-primary:focus {
background-color: #0099cc;
color: #FFFFFF;
width: 251px;
}
Your help is very much appreciated. Thanks!
I hope this snippet will help you.
form {
max-width: 250px;
position: relative;
margin: 50px auto 0;
font-size: 15px;
}
.radiobtn {
position: relative;
display: block;
}
.radiobtn label {
display: block;
background: rgba(0, 0, 0, 0.2);
color: #000;
border-radius: 5px;
padding: 10px 20px;
border: 2px solid grey;
margin-bottom: 5px;
cursor: pointer;
}
.radiobtn label:after, .radiobtn label:before {
content: "";
position: absolute;
right: 11px;
top: 11px;
width: 20px;
height: 20px;
border-radius: 3px;
background:grey;
}
.radiobtn label:before {
background: transparent;
transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s, 0.3s height cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s;
z-index: 2;
overflow: hidden;
background-repeat: no-repeat;
background-size: 13px;
background-position: center;
width: 0;
height: 0;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS4zIDEzLjIiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjcuOGwtLjQtLjRhMS43IDEuNyAwIDAgMC0yLjMuMUw1LjIgOC4yIDMgNi40YTEuNyAxLjcgMCAwIDAtMi4zLjFMLjQgN2ExLjcgMS43IDAgMCAwIC4xIDIuM2wzLjggMy41YTEuNyAxLjcgMCAwIDAgMi40LS4xTDE1IDMuMWExLjcgMS43IDAgMCAwLS4yLTIuM3oiIGRhdGEtbmFtZT0iUGZhZCA0Ii8+PC9zdmc+);
}
input[type="radio"] {
display: none;
position: absolute;
width: 100%;
appearance: none;
}
input[type="radio"]:checked + label {
background:grey;
animation-name: blink;
animation-duration: 1s;
border-color: $accentcolor;
}
input[type="radio"]:checked + label:after {
background: $accentcolor;
}
input[type="radio"]:checked + label:before {
width: 20px;
height: 20px;
}
<form>
<div class="radiobtn">
<input type="radio" id="huey"
name="drone" value="huey" checked />
<label for="huey">Learn More</label>
</div>
<div class="radiobtn">
<input type="radio" id="dewey"
name="drone" value="dewey" />
<label for="dewey">Learn More</label>
</div>
</form>
Custom radio button without check mark.
form {
max-width: 200px;
position: relative;
margin: 50px auto 0;
font-size: 15px;
}
.radiobtn {
position: relative;
display: block;
text-align:center;
}
.radiobtn label {
display: block;
background:none;
color:#01a7e1;
border-radius: 5px;
padding: 10px 20px;
border: 2px solid #01a7e1;
margin-bottom: 5px;
cursor: pointer;
font-family:Arial, Helvetica, sans-serif;
}
input[type="radio"] {
display: none;
position: absolute;
width: 100%;
appearance: none;
}
input[type="radio"]:checked + label {
background:#01a7e1;
color:#fff;
}
<form>
<div class="radiobtn">
<input type="radio" id="huey"
name="drone" value="huey" checked />
<label for="huey">Learn More</label>
</div>
<div class="radiobtn">
<input type="radio" id="dewey"
name="drone" value="dewey" />
<label for="dewey">Learn More</label>
</div>
</form>
I hope this will help you.
form {
max-width: 250px;
position: relative;
margin: 50px auto 0;
font-size: 15px;
}
.radiobtn {
position: relative;
display: block;
}
.radiobtn label {
display: block;
background: rgba(0, 0, 0, 0.2);
color: #000;
border-radius: 5px;
padding: 10px 20px;
border: 2px solid grey;
margin-bottom: 5px;
cursor: pointer;
}
.radiobtn label:after,
.radiobtn label:before {
content: "";
position: absolute;
right: 11px;
top: 11px;
width: 20px;
height: 20px;
border-radius: 3px;
background: grey;
}
.radiobtn label:before {
background: transparent;
transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s, 0.3s height cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s;
z-index: 2;
overflow: hidden;
background-repeat: no-repeat;
background-size: 13px;
background-position: center;
width: 0;
height: 0;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNS4zIDEzLjIiPiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0LjcuOGwtLjQtLjRhMS43IDEuNyAwIDAgMC0yLjMuMUw1LjIgOC4yIDMgNi40YTEuNyAxLjcgMCAwIDAtMi4zLjFMLjQgN2ExLjcgMS43IDAgMCAwIC4xIDIuM2wzLjggMy41YTEuNyAxLjcgMCAwIDAgMi40LS4xTDE1IDMuMWExLjcgMS43IDAgMCAwLS4yLTIuM3oiIGRhdGEtbmFtZT0iUGZhZCA0Ii8+PC9zdmc+);
}
input[type="radio"] {
display: none;
position: absolute;
width: 100%;
appearance: none;
}
input[type="radio"]:checked+label {
background: grey;
animation-name: blink;
animation-duration: 1s;
border-color: $accentcolor;
}
input[type="radio"]:checked+label:after {
background: $accentcolor;
}
input[type="radio"]:checked+label:before {
width: 20px;
height: 20px;
}
<form>
<div class="radiobtn">
<input type="radio" id="huey" name="drone" value="huey" checked />
<label for="huey">Learn More</label>
</div>
<div class="radiobtn">
<input type="radio" id="dewey" name="drone" value="dewey" />
<label for="dewey">Learn More</label>
</div>
</form>
I have created a range slider using CSS and customized the as per my requirement. This is how it's looks like :
.slidecontainer {
width: 18%;
pointer-events: none;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 30px;
background: #dadadaa3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
border-radius: 10px;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 30px;
background: #4CAF50;
cursor: pointer;
pointer-events:auto;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
<div class="slidecontainer">
<span>10</span><input type="range" min="10" max="100" value="40" class="slider" id="myRange"><span>100</span>
</div>
But I need to set the Minimum value inside the beginning of the range and set the Maximum value inside the end of the range using CSS.
try to give .slidecontainer
position:relative;
and set the .min and .max spans as
position:absolute;
.slidecontainer {
width: 18%;
position:relative;
pointer-events: none;
}
.slider {
-webkit-appearance: none;
height: 30px;
background: #dadadaa3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
border-radius: 10px;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 30px;
background: #4CAF50;
cursor: pointer;
pointer-events:auto;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.min {
position:absolute;
left: 3px;
top:8px;
}
.max {
position:absolute;
right: -12px;
top: 8px;
}
<div class="slidecontainer">
<span class="min">10</span><input type="range" min="10" max="100" value="40" class="slider" id="myRange"><span class="max">100</span>
</div>
Perhaps like this:
.slidecontainer {
width: 18%;
pointer-events: none;
margin: 1em auto;
display: flex;
flex-direction: column;
}
span:last-child {
align-self: flex-end;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 30px;
background: #dadada;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
position: relative;
}
.slider::before,
.slider::after {
content: "";
width: 10%;
height: 100%;
background: inherit;
position: absolute;
}
.slider::before {
right: 100%;
border-radius: 15px 0 0 15px;
}
.slider::after {
left: 100%;
border-radius: 0 15px 15px 0;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 10%;
height: 30px;
background: #4CAF50;
cursor: pointer;
pointer-events: auto;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
<div class="slidecontainer">
<span>10</span><input type="range" min="10" max="100" value="10" class="slider" id="myRange"><span>100</span>
</div>
<div class="slidecontainer">
<span>10</span><input type="range" min="10" max="100" value="100" class="slider" id="myRange"><span>100</span>
</div>
I am trying to make a switch button by using HTML elements. But I can't do animation for this. Here I have tried to use transition CSS3 property. The transition will work for some elements only and its doesn't work as expected for switch-group:before element. Is there any way to improve more animation to get an attractive one?. I have tried many links but this doesn't help with my code. I have attached code below,
input[type=checkbox] {
display: none;
}
.switch-wrapper {
position: relative;
width: 70px;
border: 1px solid;
cursor: pointer;
height: 22px;
overflow: hidden;
}
.switch-on,
.switch-off {
display: block;
width: 50%;
float: left;
height: 100%;
transition: 0.5s;
}
.switch-on {
background-color: red;
margin-left: -100%;
text-indent: -18px;
line-height: 21px;
text-align: center;
}
.switch-off {
text-indent: 18px;
line-height: 21px;
text-align: center;
background-color: aliceblue;
}
.switch-group:before {
display: block;
content: "";
position: absolute;
height: 18px;
width: 18px;
margin: 2px;
background-color: #1b191e;
top: 0px;
}
.switch-group {
display: block;
position: relative;
height: 23px;
width: 200%;
user-select: none;
}
input[type=checkbox]:checked+.switch-group .switch-on {
margin-left: 0;
}
input[type=checkbox]:checked+.switch-group:before {
right: 50%;
}
<div class="switch-wrapper">
<input type="checkbox" id="checked" />
<label class="switch-group" for="checked">
<span class="switch-on">ON</span>
<span class="switch-off">OFF</span>
</label>
</div>
The transition will not work in your :before pseudo element because you are changing the :before right value from auto(by default) to 0...transition does not works on auto values...
So try to use left:0 at start and then change it value on click(when input checked) using calc() and also use transtion:0.5s in :before to make it animate
input[type=checkbox] {
display: none;
}
.switch-wrapper {
position: relative;
width: 70px;
border: 1px solid;
cursor: pointer;
height: 22px;
overflow: hidden;
}
.switch-on,
.switch-off {
display: block;
width: 50%;
float: left;
height: 100%;
transition: 0.5s;
}
.switch-on {
background-color: red;
margin-left: -50%;
text-indent: -18px;
line-height: 21px;
text-align: center;
}
.switch-off {
text-indent: 18px;
line-height: 21px;
text-align: center;
background-color: aliceblue;
}
.switch-group:before {
display: block;
content: "";
position: absolute;
height: 18px;
width: 18px;
margin: 2px;
background-color: #1b191e;
top: 0px;
left: 0;
transition: 0.5s;
}
.switch-group {
display: block;
position: relative;
height: 23px;
width: 200%;
user-select: none;
}
input[type=checkbox]:checked+.switch-group .switch-on {
margin-left: 0;
}
input[type=checkbox]:checked+.switch-group:before {
left: calc(50% - 22px);
}
<div class="switch-wrapper">
<input type="checkbox" id="checked" />
<label class="switch-group" for="checked">
<span class="switch-on">ON</span>
<span class="switch-off">OFF</span>
</label>
</div>
Or if you want your code to work in more intuitive way, try to use opacity instead of margin.
I have changed some of your css a little bit
input[type=checkbox] {
display: none;
}
.switch-wrapper {
position: relative;
width: 70px;
border: 1px solid;
cursor: pointer;
height: 22px;
overflow: hidden;
}
.switch-on,
.switch-off {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: 0.5s;
padding: 2px 6px;
}
.switch-on {
background-color: red;
line-height: 21px;
opacity: 0;
}
.switch-off {
line-height: 21px;
background-color: aliceblue;
opacity: 1;
text-align: right;
}
.switch-group:before {
display: block;
content: "";
position: absolute;
height: 18px;
width: 18px;
margin: 2px;
background-color: #1b191e;
top: 0px;
left: 0;
transition: 0.5s;
z-index: 99;
}
.switch-group {
display: block;
position: relative;
height: 23px;
user-select: none;
}
input[type=checkbox]:checked+.switch-group .switch-on {
opacity: 1;
}
input[type=checkbox]:checked+.switch-group .switch-off {
opacity: 0;
}
input[type=checkbox]:checked+.switch-group:before {
left: calc(100% - 22px);
}
<div class="switch-wrapper">
<input type="checkbox" id="checked" />
<label class="switch-group" for="checked">
<span class="switch-on">ON</span>
<span class="switch-off">OFF</span>
</label>
</div>
Try this toggler
.onoffswitch {
position: relative; width: 48px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
height: 24px; padding: 0; line-height: 24px;
border: 2px solid #F1F1F5; border-radius: 24px;
background-color: #F1F1F5;
transition: background-color 0.3s ease-in;
}
.onoffswitch-label:before {
content: "";
display: block; width: 24px; margin: 0px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 22px;
border: 2px solid #F1F1F5; border-radius: 24px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
background-color: #2DC76D;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
border-color: #2DC76D;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
right: 0px;
}
.onoffswitch-checkbox:checked + .onoffswitch-label span.switch-off {
opacity: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label span.switch-on{
opacity: 1;
}
span.switch-off {
opacity: 1;
float: right;
font-size: 12px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
span.switch-on {
position: absolute;
font-size: 12px;
top: 50%;
transform: translateY(-50%);
opacity: 0;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="switch-on">ON</span>
<span class="switch-off">OFF</span></label>
</div>
You Can Try This.. Or visit This link For Details
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
I have made a custom on/off checkbox and I am having some trouble figuring out how to center it next to some text. Right now, I am attempting to use inline block to try this. Here is my code :
.for-you-switch .switch {
position: relative;
display: inline-block;
width: 65px;
height: 30px;
}
.for-you-switch input {
display: none;
}
.for-you-switch input:checked+.slider {
background-color: red;
}
.for-you-switch input:checked+.slider:after {
transform: translateX(35px);
}
.for-you-switch input:checked+.slider:before {
content: "on";
right: 36px;
color: #fff;
}
.for-you-switch input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
.for-you-switch .slider {
position: absolute;
cursor: pointer;
border-radius: 34px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.for-you-switch .slider:after {
position: absolute;
content: "";
border-radius: 50%;
height: 26px;
width: 26px;
left: 2px;
bottom: 2px;
background-color: #fff;
transition: .2s;
}
.for-you-switch .slider:before {
position: absolute;
content: "off";
right: 12px;
top: 6px;
transition: .4s;
}
<div class="for-you-switch">
<span>Products for you.</span>
<label class="switch">
<input type="checkbox" />
<div class="slider round"></div>
</label>
</div>
Here is a fiddle with the code to play with - https://jsfiddle.net/qywkdv31/2/
As you can see the button is kind of floating at the top of the wrapping div, I would like to have it centered to the right of the text. Unsure how to accomplish this. Thanks!
You just need to add vertical-align: middle; to .for-you-switch .switch.
.for-you-switch .switch {
position: relative;
display: inline-block;
width: 65px;
height: 30px;
vertical-align: middle;
}
.for-you-switch input {
display: none;
}
.for-you-switch input:checked+.slider {
background-color: red;
}
.for-you-switch input:checked+.slider:after {
transform: translateX(35px);
}
.for-you-switch input:checked+.slider:before {
content: "on";
right: 36px;
color: #fff;
}
.for-you-switch input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
.for-you-switch .slider {
position: absolute;
cursor: pointer;
border-radius: 34px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.for-you-switch .slider:after {
position: absolute;
content: "";
border-radius: 50%;
height: 26px;
width: 26px;
left: 2px;
bottom: 2px;
background-color: #fff;
transition: .2s;
}
.for-you-switch .slider:before {
position: absolute;
content: "off";
right: 12px;
top: 6px;
transition: .4s;
}
<div class="for-you-switch">
<span>Products for you.</span>
<label class="switch">
<input type="checkbox" />
<div class="slider round"></div>
</label>
</div>
Try,
.for-you-switch .switch{
display: inline-block;
vertical-align: middle;
}
.for-you-switch span{
display: inline-block;
vertical-align: middle;
}
Hope this help.
.switch {
position: relative;
display: inline-block;
vertical-align:middle;
width: 65px;
height: 30px; }