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.
Related
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 created a custom checkbox on this site and I am trying to use it with tabindex, but I know that this CSS uses display: none which doesn't allow taborder, so this is my question: How can I use this custom checkbox in a form while keeping the input's properties?
You can attach the tabindexto the label that is standing in for the checkbox and then attach a keyboard event to the label to toggle the checkbox when a key is pressed. In this example I am toggling it when the user presses the space bar, like a real checkbox would do.
var checkbox = document.getElementById('myonoffswitch'),
label = document.querySelector('#myonoffswitch + label');
label.addEventListener('keypress', function (evt) {
if (evt.key === ' ') {
checkbox.checked = !checkbox.checked;
} else if (evt.key === 'Enter') {
// .form returns a reference to the parent form
checkbox.form.submit();
}
}, false);
.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: "";
padding-left: 10px;
background-color: #2E8DEF; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "";
padding-right: 10px;
background-color: #CCCCCC; color: #333333;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 25px; margin: 2.5px;
background: #000000;
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;
}
<form id="theform">
<input><br>
<br>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch" tabindex="0">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div><br>
<input><br>
<input type="checkbox" id="normal-checkbox"><label for="normal-checkbox">Normal Checkbox</label>
</form>
I'm developing a Chrome Extension and I took some lovely toggle switches from this site to add to my main page.
Float right seems to have no effect on the toggles and I'd like to avoid using margins to position them. It would be nice if the toggles could line up under the third set of buttons above.
Any ideas?
<div class="row" id="row-6">
<div class="debug">
Debug Automation Chains
</div>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="debug-switch">
<label class="onoffswitch-label" for="debug-switch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
<div class="row" id="row-7">
<div class="ui-dev-mode">
UI Development Mode
</div>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="devmode-switch">
<label class="onoffswitch-label" for="devmode-switch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>`
`
.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 #8F8F8F; border-radius: 10px;
}
.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: 17px; padding: 0; line-height: 17px;
font-size: 10px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ENABLED";
padding-left: 10px;
background-color: #00a3db; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "DISABLED";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 9px; margin: 4px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 69px;
border: 2px solid #8F8F8F; border-radius: 10px;
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;
}
`
It's difficult to help without a link and only some of your css. Could you try the following:
.row{
display: block;
float: left;
width: 100%;
}
.debug, .ui-dev-mode {
float: left;
}
.onoffswitch {
float: right;
}
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"
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;
}