I have the following checkbox:
<div class="onoffswitch">
<input type="checkbox" name="showOnNavigation" class="onoffswitch-checkbox" id="showOnNavigation" checked>
<label class="onoffswitch-label" for="showOnNavigation">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
The CSS for it:
.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 {
width: 200%; margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
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;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #A3D900; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #CCCCCC; color: #333333;
text-align: right;
}
.onoffswitch-switch {
width: 25px; margin: 2.5px;
background: #000000;
border: 2px solid #999999; border-radius: 20px;
position: absolute; top: 0; bottom: 0; right: 56px;
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s; 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;
}
When I'm submitting a form and checkbox is on the ON position, the checkbox value is ON. When it is on OFF position, the value is not set to OFF, so my script will issue an error that the index is not set. It used to work before, but for some reason it doesn't work anymore. Really frustrating, kindly HELP!! A CSS only approach would be most preffered, otherwsie I could easily do this with JavaScript.
I got the code generated from http://proto.io/freebies/onoff/
Put a hidden field with the same name before your checkbox with a value of "OFF"
Related
Please I need your assistance to link the toggle to 2 separate links.. example..1 is www.google.com and second is www.ask.com
I need the 2 links linked to any of the ends of the switch so when it is selected , the switch moves to the selected end and also opens a new windows relating to the link above
.flipswitch {
position: relative;
width: 195px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
}
.flipswitch input[type=checkbox] {
display: none;
}
.flipswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 50px;
}
.flipswitch-inner {
width: 200%;
margin-left: -100%;
-webkit-transition: margin 0.3s ease-in 0s;
-moz-transition: margin 0.3s ease-in 0s;
-ms-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s;
}
.flipswitch-inner:before, .flipswitch-inner:after {
float: left;
width: 50%;
height: 34px;
padding: 0;
line-height: 34px;
font-size: 18px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.flipswitch-inner:before {
content: "ask view";
padding-left: 13px;
background-color: #256799;
color: #FFFFFF;
}
.flipswitch-inner:after {
content: "google View";
padding-right: 13px;
background-color: #EBEBEB;
color: #888888;
text-align: right;
}
.flipswitch-switch {
width: 31px;
margin: 1.5px;
background: #FFFFFF;
border: 2px solid #999999;
border-radius: 50px;
position: absolute;
top: 0;
bottom: 0;
right: 160px;
-webkit-transition: all 0.3s ease-in 0s;
-moz-transition: all 0.3s ease-in 0s;
-ms-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {
margin-left: 0;
}
.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {
right: 0;
}
<div class="flipswitch">
<input type="checkbox" checked="" id="fs" class="flipswitch-cb" name="flipswitch">
<label for="fs" class="flipswitch-label">
<div class="flipswitch-inner"> </div>
<div class="flipswitch-switch"></div>
</label>
</div>
Like this
document.getElementById("fs").addEventListener("change",function() {
const loc = this.checked ? "https://www.google.com" : "https://ask.com/";
console.log(loc)
// window.open(loc,"_blank"); // only works if browser allows it
location = loc; // will work in all cases where the target allows it
})
.flipswitch {
position: relative;
width: 195px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
}
.flipswitch input[type=checkbox] {
display: none;
}
.flipswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 50px;
}
.flipswitch-inner {
width: 200%;
margin-left: -100%;
-webkit-transition: margin 0.3s ease-in 0s;
-moz-transition: margin 0.3s ease-in 0s;
-ms-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s;
}
.flipswitch-inner:before, .flipswitch-inner:after {
float: left;
width: 50%;
height: 34px;
padding: 0;
line-height: 34px;
font-size: 18px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.flipswitch-inner:before {
content: "ask view";
padding-left: 13px;
background-color: #256799;
color: #FFFFFF;
}
.flipswitch-inner:after {
content: "google View";
padding-right: 13px;
background-color: #EBEBEB;
color: #888888;
text-align: right;
}
.flipswitch-switch {
width: 31px;
margin: 1.5px;
background: #FFFFFF;
border: 2px solid #999999;
border-radius: 50px;
position: absolute;
top: 0;
bottom: 0;
right: 160px;
-webkit-transition: all 0.3s ease-in 0s;
-moz-transition: all 0.3s ease-in 0s;
-ms-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {
margin-left: 0;
}
.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {
right: 0;
}
<div class="flipswitch">
<input type="checkbox" checked="" id="fs" class="flipswitch-cb" name="flipswitch">
<label for="fs" class="flipswitch-label">
<div class="flipswitch-inner"> </div>
<div class="flipswitch-switch"></div>
</label>
</div>
I've just created a button. I've found a problem where my content doesn't fit on it's place.
Here is my code:
.btn-red {
display: inline-block;
padding: 13px 20px;
color: #fff;
text-decoration: none;
position: relative;
background: #f42f2c;
font: 10px "Oswald", sans-serif;
letter-spacing: 0.4em;
text-align: center;
text-indent: 2px;
text-transform: uppercase;
transition: color 0.1s linear 0.05s;
border-radius: 0;
border: 1px solid #f42f2c;
}
.btn-red:focus {
box-shadow:none !important;
}
.btn-red::before {
content: "READ MORE";
display: block;
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #f9f9ff;
color:#f42f2c !important;
z-index: 1;
opacity: 0;
transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0.2s;
}
.btn-red::after {
transition: border 0.1s linear 0.05s;
}
.btn-red .btn-red-inner {
position: relative;
z-index: 2;
}
.btn-red:hover {
transition: color 0.1s linear 0s;
text-decoration: none;
color: #f42f2c !important;
}
.btn-red:hover::before {
top: 0;
height: 100%;
opacity: 1;
transition: height 0.2s ease, top 0.2s ease, opacity 0s linear 0s;
}
.btn-red:hover::after {
transition: border 0.1s linear 0s;
}
<a href="o-nas.php" class="btn-red">
<span class="btn-inner">READ MORE</span>
</a>
I tried to add padding: 13px 20px to .btn-red::before, but it has some bugs and I don't know how to solve this.
I think I achieve the same thing that you wanted without using :before to control the button text. Look below:
.btn-red {
position: relative;
display: inline-flex;
box-sizing: border-box;
padding: 13px 20px;
text-decoration: none;
background-color: #f42f2c;
border: 1px solid #f42f2c;
}
.btn-red:before {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 0;
content: "";
background-color: #fff;
transform: translateY(-50%);
transition: height 0.2s ease-in-out;
}
.btn-red .btn-inner {
font: 10px "Oswald", sans-serif;
color: #fff;
line-height: 1em;
letter-spacing: 0.4em;
text-transform: uppercase;
z-index: 1;
transition: color 0.2s ease-in-out;
}
.btn-red:hover:before {
height: 100%;
}
.btn-red:hover .btn-inner {
color: #f42f2c;
}
<a class="btn-red" href="#" title="Read More">
<span class="btn-inner">Read more</span>
</a>
Hope this can help you anyway. If you have any doubt about the code, please, just let me know :)
Cheers!
In Chrome, firefox, opera, brave ia ok, in Safari - transition no good.
In Edge, Internet Esplorer - apprearance not work, looks like the checkbox
How to repear safari's transition and apprearance in Edge/IE browsers?
.mytoggle {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 80px;
height: 30px;
display: inline-block;
position: relative;
border-radius: 15px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #bdc3c7;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle:before {
width: 22px;
height: 22px;
left: 4px;
top: 4px;
border-radius: 11px;
z-index: 2;
content: "ON OFF";
display: block;
position: absolute;
background: #7f8c9a;
font-size: 14.99px;
font-weight: 700;
text-transform: uppercase;
text-indent: -32px;
word-spacing: 40px;
color: #fff;
white-space: nowrap;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle:checked {
background-color: #2A3542;
}
input.mytoggle:focus {
outline: 0;
}
.mytoggle:checked:before {
background-color: #41cac0;
color: #41cac0;
left: 54px;
}
<input type="checkbox" checked="checked" class="mytoggle" style="" />
Styling a checkbox directly is a pain, you could use the checkbox + label hack, in which you link a label to a checkbox, and apply the styles to the label instead of the checkbox itself:
.mytoggle {
visibility: hidden;
opacity: 0;
position: absolute;
top: -99999px;
}
.mytoggle + label {
font-family: arial;
vertical-align: middle;
width: 80px;
height: 30px;
display: inline-block;
position: relative;
border-radius: 15px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #bdc3c7;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle + label:before {
width: 22px;
height: 22px;
left: 4px;
top: 4px;
border-radius: 11px;
z-index: 2;
content: "ON OFF";
display: block;
position: absolute;
background: #7f8c9a;
font-size: 14.99px;
font-weight: 700;
text-transform: uppercase;
text-indent: -32px;
word-spacing: 40px;
color: #fff;
white-space: nowrap;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
.mytoggle:checked + label {
background-color: #2A3542;
}
input.mytoggle:focus + label {
outline: 0;
}
.mytoggle:checked + label:before {
background-color: #41cac0;
color: #41cac0;
left: 54px;
}
<input type="checkbox" checked="checked" class="mytoggle" id="mycheckbox" />
<label for="mycheckbox" />
input { opacity:0}
input+label {
width: 80px;
height: 30px;
display: inline-block;
position: relative;
border-radius: 15px;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #bdc3c7;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
input+label:before {
width: 22px;
height: 22px;
left: 4px;
top: 4px;
border-radius: 11px;
z-index: 2;
content: "ON OFF";
display: block;
position: absolute;
background: #7f8c9a;
font-size: 14.99px;
font-weight: 700;
text-transform: uppercase;
text-indent: -32px;
word-spacing: 40px;
color: #fff;
white-space: nowrap;
-webkit-transition: .25s ease-out;
-moz-transition: .25s ease-out;
-o-transition: .25s ease-out;
transition: .25s ease-out;
}
input:checked+label{
background-color: #2A3542;
}
input.mytoggle:focus {
outline: 0;
}
input:checked+label:before {
background-color: #41cac0;
color: #41cac0;
left: 54px;
}
<input type="checkbox" name="abc" id="abc" checked="checked" style="" />
<label for="abc" class="mytoggle"></label>
I just added a label for input checkbox, tested in internet explorer 11. I don't have have safari browser to test it, So you can test and let know, if this answer meets your requirement.
Please try this.
$(document).ready(function(e) {
$(".ra-box").click(function(){
$(this).toggleClass('checked');
});
});
input[type=checkbox] { opacity: 0; }
.ra-box {
display: inline-block;
margin: 0;
padding: 6px;
cursor: pointer;
border-radius: 15px;
overflow: hidden;
background: #2a3542;
width: 70px;
height: 18px;
position: relative;
}
.ra-box:before {
height: 20px;
width: 20px;
background: #41cac0;
color: #41cac0;
content: 'ON';
text-indent: -40px;
position: absolute;
top: 5px;
right: 5px;
border-radius: 50%;
}
.ra-box:after {
height: 20px;
width: 20px;
background: #7f8c9a;
color: #fff;
content: 'OFF';
position: absolute;
top: 5px;
border-radius: 50%;
text-indent: 30px;
left: 85px;
}
/* Check Box Check Change background color */
.ra-box.checked:before { right: 85px; }
.ra-box.checked:after { left: 5px;}
.ra-box.checked { background: #bdc3c7; }
.ra-box,.checked,.ra-box.checked,.ra-box:before,.ra-box:after,.ra-box.checked:before,.ra-box.checked:after {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ra-box">
<input type="checkbox" id="toggle-1">
</div>
<br>
<br>
<div class="ra-box">
<input type="checkbox" id="toggle-1">
</div>
I would like add a clear input text feature to the existing search functionality. When user click the cross animation it should clear the input text instead of moving the arrows away. I have added display:none at last not valid, but not working as expected. Can someone please assist on how to implement this functionality ?.
.search-box {
position: relative;
display: inline-block;
border: 2px solid #000;
border-radius: 20px;
float:right;
}
.search-box input[type="text"] {
-webkit-appearance: none;
position: relative;
display: block;
width: 20px;
height: 20px;
margin: 0;
padding: 5px;
border: none;
border-radius: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: none;
box-shadow: none;
z-index: 1;
-webkit-transition: all 0.5s ease-out 0.5s;
transition: all 0.5s ease-out 0.5s;
outline: none;
}
.search-box input[type="text"]:focus {
width: 280px;
height: 30px;
margin-right: 20px;
-webkit-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
}
.search-box input[type="text"]:focus + span::before {
height: 14px;
margin: -22px 0 0 -15px;
-webkit-transition: all 0.2s ease-out 0.5s;
transition: all 0.2s ease-out 0.5s;
}
.search-box input[type="text"]:focus + span::after {
visibility: visible;
margin: -22px 0 0 -15px;
-webkit-transition: all 0.2s ease-out 0.7s;
transition: all 0.2s ease-out 0.7s;
}
.search-box span {
display: block;
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 0;
z-index: 10;
}
.search-box span::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 8px;
margin: -4px 0 0 0;
background-color: #000;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 0.2s ease-out 0.2s;
transition: all 0.2s ease-out 0.2s;
}
.search-box span::after {
content: '';
visibility: hidden;
display: block;
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 14px;
margin: -36px 0 0 5px;
background-color: #000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;
}
.search-box:not(:valid) ~ span {
display: none;
}
<form name="search">
<label class="search-box">
<input type="text" />
<span></span>
</label>
</form>
https://jsfiddle.net/0wansxza/
You could do it using jQuery with that $('#element').val('');.
jQuery(document).ready(function(){
jQuery('.search-box input[type="text"]').focusout(function() {
jQuery(this).val('');
})
});
.search-box {
position: relative;
display: inline-block;
border: 2px solid #000;
border-radius: 20px;
float:right;
}
.search-box input[type="text"] {
-webkit-appearance: none;
position: relative;
display: block;
width: 20px;
height: 20px;
margin: 0;
padding: 5px;
border: none;
border-radius: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: none;
box-shadow: none;
z-index: 1;
-webkit-transition: all 0.5s ease-out 0.5s;
transition: all 0.5s ease-out 0.5s;
outline: none;
}
.search-box input[type="text"]:focus {
width: 280px;
height: 30px;
margin-right: 20px;
-webkit-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
}
.search-box input[type="text"]:focus + span::before {
height: 14px;
margin: -22px 0 0 -15px;
-webkit-transition: all 0.2s ease-out 0.5s;
transition: all 0.2s ease-out 0.5s;
}
.search-box input[type="text"]:focus + span::after {
visibility: visible;
margin: -22px 0 0 -15px;
-webkit-transition: all 0.2s ease-out 0.7s;
transition: all 0.2s ease-out 0.7s;
}
.search-box span {
display: block;
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 0;
z-index: 10;
}
.search-box span::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 8px;
margin: -4px 0 0 0;
background-color: #000;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 0.2s ease-out 0.2s;
transition: all 0.2s ease-out 0.2s;
}
.search-box span::after {
content: '';
visibility: hidden;
display: block;
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 14px;
margin: -36px 0 0 5px;
background-color: #000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;
}
.search-box:not(:valid) ~ span {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="search">
<label class="search-box">
<input type="text" />
<span></span>
</label>
</form>
Using Just CSS. I had to modify your markup a little. To clear the input field i had to add a button that resets the form when clicked. See my code and comments below. Hope it helps
.search-box {
position: relative;
display: inline-block;
border: 2px solid #000;
border-radius: 20px;
float:right;
}
.search-box input[type="text"] {
-webkit-appearance: none;
position: relative;
display: block;
width: 20px;
height: 20px;
margin: 0;
padding: 5px;
border: none;
border-radius: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: none;
box-shadow: none;
z-index: 11;/**Changed This**/
-webkit-transition: all 0.5s ease-out 0.5s;
transition: all 0.5s ease-out 0.5s;
outline: none;
}
/**Updated the below codes**/
.search-box input[type="text"]:focus,
.search-box .btn:focus + input{
width: 280px;
height: 30px;
margin-right: 30px;
-webkit-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
}
/**Updated the below codes**/
.search-box input[type="text"]:focus + span::before,
.search-box .btn:focus + input[type="text"] + span::before{
height: 14px;
margin: -22px 0 0 -15px;
-webkit-transition: all 0.2s ease-out 0.5s;
transition: all 0.2s ease-out 0.5s;
}
/**Updated the below codes**/
.search-box input[type="text"]:focus + span::after,
.search-box .btn:focus + input[type="text"] + span::after{
visibility: visible;
margin: -22px 0 0 -15px;
-webkit-transition: all 0.2s ease-out 0.7s;
transition: all 0.2s ease-out 0.7s;
}
.search-box span {
display: block;
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 0;
z-index: 10;
}
.search-box span::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 8px;
margin: -4px 0 0 0;
background-color: #000;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 0.2s ease-out 0.2s;
transition: all 0.2s ease-out 0.2s;
}
.search-box span::after {
content: '';
visibility: hidden;
display: block;
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 14px;
margin: -36px 0 0 5px;
background-color: #000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;
}
/**
.search-box:not(:valid) ~ span {
display: none;
}**/
/**Added the below codes**/
.search-box .btn {
position: absolute;
top: 0;
right: 0;
bottom: 0;
background: transparent;
border: 0;
outline: 0;
width: 30px;
cursor: pointer;
z-index: 11;
}
<form name="search">
<label class="search-box">
<!--Added the button to clear the field on click-->
<button class="btn" type="reset"></button>
<input type="text" />
<span></span>
</label>
</form>
I want to use toggle button from Proto.io:
https://proto.io/freebies/onoff.
It works but when I place the button after an image, the switch is not round anymore. Have a look how it is on JSFiddle: https://jsfiddle.net/rvmcn7ju.
Pro forma, here's the CSS:
.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%;
-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s; 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;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "UP";
padding-left: 10px;
background-color: #009900; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "DOWN";
padding-right: 10px;
background-color: #000099; color: #FFFFFF;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
border: 2px solid #999999; border-radius: 20px;
position: absolute; top: 0; bottom: 0; right: 56px;
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s; 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 works when I change top attribute to 292px in .onoffswitch-switch (with this particular image). I probably have to change the position to relative and do sth else. Any help appreciated.
Updated your fiddle you need position relative to contain the switch.
.onoffswitch-label {
position: relative;
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
https://jsfiddle.net/rvmcn7ju/1/
Updated again because the switch looked ovaly
.onoffswitch-switch {
...
margin: 4px; // changed margin
height: 18px; // added height
...
}
https://jsfiddle.net/rvmcn7ju/3/