Hi guys I've created a toggle button from checkbox. I have a icon from awesome font as a css content. I've been trying almost everything but I'm not albe to align css content string in the middle of the circle.
Here is the css content part:
.onoffswitch-label:before {
content: "\f000";
font-family: FontAwesome;
display: block;
width: 30px;
height: 30px;
margin: 4px 4px 0 0;
background-color: #59B200;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
right: 52px;
border: 2px solid #59B200;
border-radius: 38px;
transition: all 0.3s ease-in 0s;
}
Here is full example
http://jsfiddle.net/vzjyyob4/
Thank you for your help
You can use text-align: center to get the icon centered horizontally, then set line-height to a desired value to get it aligned vertically.
Here is the CSS for the label:
text-align: center;
line-height: 32px;
Here is an updated JSFiddle: http://jsfiddle.net/vzjyyob4/1/
And here is an inline live demo:
.onoffswitch {
position: relative;
width: 94px;
-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: 38px;
padding: 0;
line-height: 38px;
border: 2px solid #59B200;
border-radius: 38px;
background-color: #FFFFFF;
transition: all 0.3s ease-in;
}
.onoffswitch-label:before {
content: "\f000";
font-family: FontAwesome;
display: block;
width: 30px;
height: 30px;
margin: 4px 4px 0 0;
background-color: #59B200;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
right: 52px;
border: 2px solid #59B200;
border-radius: 38px;
transition: all 0.3s ease-in 0s;
text-align: center;
line-height: 32px;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
background-color: #59B200;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
border-color: #59B200;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
border-color: #fff;
background-color: #fff;
color: #59B200;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
right: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch"></label>
</div>
Just add this CSS rule to align content:
.onoffswitch-label:before {
text-align: center;
}
try it here
Use either line-height property:
.onoffswitch-label:before {
text-align: center;
line-height: 32px;
}
Or flexbox:
.onoffswitch-label:before {
display: flex;
align-items: center;
justify-content: center;
}
Related
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 1 year ago.
I have three divs, of differing heights which I need to align in a straight line horizontally. Currently, I have set them as display: inline-block but they are not aligned correctly. If I set a top or bottom margin, it still doesn't resolve itself. Any ideas how I could fix this?
/*toggle switch */
.onoffswitch {
position: relative; width: 54px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
position: absolute;
opacity: 0;
pointer-events: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #3273F0; 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: 24px; padding: 0; line-height: 24px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "";
padding-left: 10px;
background-color: #f6f6f6; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "";
padding-right: 10px;
background-color: #f6f6f6; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 22px; margin: 3px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 26px;
border: 2px solid #3273F0; 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;
background-color: #3273F0;
}
<div>
<div style="display: inline-block"> Male</div>
<div style="display: inline-block" class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" tabindex="0" checked="">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div style="display: inline-block"> Fermale</div>
</div>
Create a new CSS selector for div and add the styling vertical-align: center;
/*toggle switch */
.onoffswitch {
position: relative; width: 54px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
position: absolute;
opacity: 0;
pointer-events: none;
}
div {
vertical-align:middle;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #3273F0; 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: 24px; padding: 0; line-height: 24px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "";
padding-left: 10px;
background-color: #f6f6f6; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "";
padding-right: 10px;
background-color: #f6f6f6; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 22px; margin: 3px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 26px;
border: 2px solid #3273F0; 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;
background-color: #3273F0;
}
<div>
<div style="display: inline-block"> Male</div>
<div style="display: inline-block" class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" tabindex="0" checked="">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div style="display: inline-block"> Female</div>
</div>
I am trying to add a checkbox based toggle button on my webpage that is compatible with Opera mini extreme data-savings mode. Right now the button does not change its state after it is clicked.
Source of code: https://proto.io/freebies/onoff/
Note that this source when opened on Opera mini extreme mode is working fine.
The button:
<div class="onoffswitch" style="display:inline-block;align-items: center;">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
this is the class definition
.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: 11px;
background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 11px;
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;
}
I thought that maybe the transition property from the class onoffswitch-switch style class might not be compatible with OBML but even removing it didn't help. Can you please tell me what changes need to be made so this starts working, or any other form of toggle button that works for Opera Mini Extreme mode.
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>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
This is the sample http://jsfiddle.net/TX8fs/1/
I tried
display:block;float:left;
But the urgent input checkbox will overlap the 2 input infront of it. Any solution to fix this? I want to display the urgent input checkbox beside the label.
Something like this? jsfiddle
Note: only switched order of HTML elements inside div, and added "float: left;" to **
.select-style{
display: inline;
}
.onoffswitch {
position: relative; width: 136px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
float: left; /* ** added line ** */
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 0px;
}
.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: 19px; padding: 0; line-height: 15px;
font-size: 12px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
border: 2px solid transparent;
}
.onoffswitch-inner:before {
content: "URGENT";
padding-left: 10px;
background-color: #FF0000; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "URGENT";
padding-right: 10px;
background-color: #EEEEEE; color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 12px; margin: 0px;
background: #A1A1A1;
position: absolute; top: 0; bottom: 0;
right: 124px;
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;
background-color: #A1A1A1;
}
<!--Text box -->
<input data-toggle="collapse" data-target="#b" type="checkbox">
<label class="label-supplier"> abc </label>
<!-- dropdown menu -->
<div class="select-style">
<div class="onoffswitch">
<label class="onoffswitch-label" for="#a">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
<!-- Switch order of checkbox and switch-->
<input type="checkbox" class="onoffswitch-checkbox btn-urgent" id="#a">
</div>
</div>
The easiest solution is to simply make your .select-style an inline-block instead of an inline element, as can be seen here.
.select-style {
display: inline-block;
}
.onoffswitch {
position: relative;
width: 136px;
-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: 0px;
}
.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: 19px;
padding: 0;
line-height: 15px;
font-size: 12px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
border: 2px solid transparent;
}
.onoffswitch-inner:before {
content: "URGENT";
padding-left: 10px;
background-color: #FF0000;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "URGENT";
padding-right: 10px;
background-color: #EEEEEE;
color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 12px;
margin: 0px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 124px;
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;
background-color: #A1A1A1;
}
<!--Text box -->
<input data-toggle="collapse" data-target="#b" type="checkbox">
<label class="label-supplier"> abc </label>
<!-- dropdown menu -->
<div class="select-style">
<div class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox btn-urgent" id="#a">
<label class="onoffswitch-label" for="#a">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
However, if you additionally want to ensure that all three elements are aligned vertically, you'll need to also add vertical-align: middle to all three elements:
input, input + label, .select-style {
vertical-align: middle;
}
Which results in the following:
.select-style {
display: inline-block;
}
.onoffswitch {
position: relative;
width: 136px;
-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: 0px;
}
.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: 19px;
padding: 0;
line-height: 15px;
font-size: 12px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
border: 2px solid transparent;
}
.onoffswitch-inner:before {
content: "URGENT";
padding-left: 10px;
background-color: #FF0000;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "URGENT";
padding-right: 10px;
background-color: #EEEEEE;
color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 12px;
margin: 0px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 124px;
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;
background-color: #A1A1A1;
}
input, input + label, .select-style {
vertical-align: middle;
}
<!--Text box -->
<input data-toggle="collapse" data-target="#b" type="checkbox">
<label class="label-supplier"> abc </label>
<!-- dropdown menu -->
<div class="select-style">
<div class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox btn-urgent" id="#a">
<label class="onoffswitch-label" for="#a">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
Hope this helps! :)
I am trying to make an on/off switch, but it works incorrectly. I have a few rows with the switch. It's auto generated so that when I click every row except the first it switches 1 row.
Here is the html:
<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>
and css:
.onoffswitch {
position: relative;
width: 88px;
-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: 1px solid #D6D6D6;
border-radius: 5px;
}
.onoffswitch .onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch .onoffswitch-inner:before, .onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 33px;
padding: 0;
line-height: 33px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-label .onoffswitch-inner:before {
content: "Yes";
padding-left: 10px;
background-color: blue; color: #FFFFFF;
}
.onoffswitch-label .onoffswitch-inner:after {
content: "No";
padding-right: 10px;
background-color: #ccc; color: #999999;
text-align: right;
}
.onoffswitch-label .onoffswitch-switch {
display: block;
width: 30px;
margin: 5px 0;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 53px;
border: 2px solid #D6D6D6; border-radius: 5px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch > .onoffswitch-checkbox:checked + .onoffswitch-label > .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch > .onoffswitch-checkbox:checked + .onoffswitch-label >.onoffswitch-switch {
right: 0px;
}
I try to do it with CSS only, without JS(JQuery, etc...)
Can you tell me what's wrong?
Your code is correct here's an example: https://jsfiddle.net/Lfv76omw/
You should set an unique id and name attribute for the elements
name="onoffswitch" id="myonoffswitch" and for="myonoffswitch" must be unique.
I simply added an incremental number like
name="onoffswitch1" id="myonoffswitch1" and for="myonoffswitch1"
name="onoffswitch2" id="myonoffswitch2" and for="myonoffswitch2"
name="onoffswitch3" id="myonoffswitch3" and for="myonoffswitch3"