EDITED
Switch/Toggle Radio input button working on other browsers but not on IE.
Forgot to mention that I'm editing an existing markup from an old
project. I hope to fix the issue from CSS side and resolve the issue without modifying the markup
(bellow) as much as possible cause it's globally used.
<div class="input-icon">
<input type="checkbox" value="1" class="switch">
</div>
Please check my codes https://codepen.io/vrsotto/pen/qGpzeE
Try to make a test with code below may help you to fix the issue for Internet Explorer.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: limegreen;
}
input:focus + .slider {
box-shadow: 0 0 1px limegreen;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</body>
</html>
Output in IE 11:
Related
How to add a toggle button on Razor Page with C#? I have tried to do it with common CSS commands, but it doesn't work.
Here is a working demo:
#page
#model IndexModel
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
#section Scripts
{
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
}
Result:
I've already tried anything I could find and basically the general idea is to use following css rule:
input[type=checkbox][disabled] {
background: red !important;
background-color: red !important;
outline: 1px solid red;
}
The problem is that the only rule that is working is the outline. The background just wont change in any way. It remains gray. I'm providing a screenshot of the result of the css rules I posted above.
Is there any working way to successfully change the background color of the disabled checkboxes?
There is no way do it with native appearance, so you must create custom template with label and use pseudo elements like :before or :after:
.flex-container {
display: flex;
flex-flow: row-wrap;
}
.flex-column {
padding: 0 15px;
flex: 0 0 auto;
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
position: absolute;
left: -9999px;
}
[type="checkbox"]:checked + label,
[type="checkbox"]:not(:checked) + label
{
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
}
[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid #ddd;
background: #fff;
border-radius: 5px;
}
[type="checkbox"]:checked + label:after,
[type="checkbox"]:not(:checked) + label:after {
content: '';
width: 8px;
height: 8px;
background: #00579c;
position: absolute;
top: 6px;
left: 6px;
border-radius: 50%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
[type="checkbox"]:not(:checked) + label:after {
-webkit-transform: scale(0);
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
[type="checkbox"]:disabled + label {
opacity: 0.7;
cursor: not-allowed;
}
[type="checkbox"]:disabled + label:before {
border-color: red;
}
<div class="flex-container">
<div class="flex-column">
<input type="checkbox" id="test2">
<label for="test2">Default</label>
</div>
<div class="flex-column">
<input type="checkbox" id="test1" checked>
<label for="test1">Checked</label>
</div>
<div class="flex-column">
<input type="checkbox" id="test3" disabled>
<label for="test3">Disabled</label>
</div>
</div>
I want to build a custom toggle switch, which has a Google maps like pin instead of a circle.
Therefore I did the following:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</body>
</html>
CSS
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 40px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
left: 4px;
bottom: 10px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
width: 20px;
height: 20px;
border-radius: 0 50% 50% 50%;
border: 3px solid black;
transform: rotate(225deg);
margin-top: 20px;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
It is nearly what I was trying to do. But I need the pin to be rotated until the 'arrowhead' points to the bottom again. So a full rotation.
Is that somehow possible?
You can find my code here:
https://codepen.io/lsgit/pen/GRRbrQq
Thanks in advance.
Update these styles
.slider:before {
transform: translate(0px) rotate(-132deg);
}
input:checked + .slider:before {
transform: translate(25px) rotate(223deg);
}
use -web-kits and -ms yourself Thanks
HTML
<label class="svgCheckbox">
<input type="checkbox" name="test" value="1" checked="checked" class="svgCheckboxOn">
<span>
::before
::after
</span>
</label>
CSS
.svgCheckbox > input[type=checkbox] + span:before {
content: ' ';
position: absolute;
left: -35px;
top: -3px;
width: 25px;
height: 25px;
display: block;
background: #FCFCFC;
border: 2px solid #b1bac1;
border-radius: 2px;
}
.svgCheckbox > input[type=checkbox] + span:after {
content: ' ';
position: absolute;
left: -35px;
top: -3px;
width: 23px;
height: 23px;
display: block;
z-index: 1;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE4MS4yIDI3MyAxNyAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAxODEuMiAyNzMgMTcgMTYiPjxwYXRoIGQ9Ik0tMzA2LjMgNTEuMmwtMTEzLTExM2MtOC42LTguNi0yNC04LjYtMzQuMyAwbC01MDYuOSA1MDYuOS0yMTIuNC0yMTIuNGMtOC42LTguNi0yNC04LjYtMzQuMyAwbC0xMTMgMTEzYy04LjYgOC42LTguNiAyNCAwIDM0LjNsMjMxLjIgMjMxLjIgMTEzIDExM2M4LjYgOC42IDI0IDguNiAzNC4zIDBsMTEzLTExMyA1MjQtNTI0YzctMTAuMyA3LTI1LjctMS42LTM2eiIvPjxwYXRoIGZpbGw9IiMzNzM3MzciIGQ9Ik0xOTcuNiAyNzcuMmwtMS42LTEuNmMtLjEtLjEtLjMtLjEtLjUgMGwtNy40IDcuNC0zLjEtMy4xYy0uMS0uMS0uMy0uMS0uNSAwbC0xLjYgMS42Yy0uMS4xLS4xLjMgMCAuNWwzLjMgMy4zIDEuNiAxLjZjLjEuMS4zLjEuNSAwbDEuNi0xLjYgNy42LTcuNmMuMy0uMS4zLS4zLjEtLjV6Ii8+PHBhdGggZD0iTTExODcuMSAxNDMuN2wtNTYuNS01Ni41Yy01LjEtNS4xLTEyLTUuMS0xNy4xIDBsLTI1My41IDI1My41LTEwNi4yLTEwNi4yYy01LjEtNS4xLTEyLTUuMS0xNy4xIDBsLTU2LjUgNTYuNWMtNS4xIDUuMS01LjEgMTIgMCAxNy4xbDExNC43IDExNC43IDU2LjUgNTYuNWM1LjEgNS4xIDEyIDUuMSAxNy4xIDBsNTYuNS01Ni41IDI2Mi0yNjJjNS4yLTMuNCA1LjItMTIgLjEtMTcuMXpNMTYzNC4xIDE2OS40bC0zNy43LTM3LjdjLTMuNC0zLjQtOC42LTMuNC0xMiAwbC0xNjkuNSAxNjkuNS03MC4yLTcxLjljLTMuNC0zLjQtOC42LTMuNC0xMiAwbC0zNy43IDM3LjdjLTMuNCAzLjQtMy40IDguNiAwIDEybDc3LjEgNzcuMSAzNy43IDM3LjdjMy40IDMuNCA4LjYgMy40IDEyIDBsMzcuNy0zNy43IDE3NC43LTE3Ni40YzEuNi0xLjcgMS42LTYuOS0uMS0xMC4zeiIvPjwvc3ZnPg==') no-repeat center center;
transition: all .2s ease;
transform: scale(0);
opacity: 0;
}
.svgCheckbox > input[type=checkbox]:checked + span:after {
transform: scale(1);
opacity: 1;
}
Currently the only animation that I could think of that I can use is scale. Is it possible to use this technique however to have animation like in link below.
https://codepen.io/tingc10/pen/ZbVMBe/
I need to use the background technique as all the others one were causing problem in internet explorer.
Welcome all. Actually I know how to call a url when a user press a button. This is a sample:
<form action="generator/doWork" method="GET" target="_blank">
<input type="submit" value="Do Work">
</form>
The problem is that now, the objetive is to enable or disable one of the functionalities of my web when the user press the switch. When the switch is ON, generator/disable url must be called when the switch is pressed and OFF is setted, and when the switch is OFF, generator/enable url must be called when the switch gets pressed and ON must be setted. I have no idea about how to do that. Any help will be useful.
This is my switch button.
<div class="value" id="onOffSwitch">
<div class="onoffswitch">
<label class="switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
</div>
</div>
css of the switch button:
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 80px;
height: 28px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #D40066;
}
input:focus + .slider {
box-shadow: 0 0 1px #D40066;
}
input:checked + .slider:before {
-webkit-transform: translateX(52px);
-ms-transform: translateX(52px);
transform: translateX(52px);
}
/* Rounded sliders */
.slider.round {
border-radius: 28px;
}
.slider.round:before {
border-radius: 50%;
}
Thank you so much
Using javascript you could do the following:
(function(){ //wait for load event
var form = document.getElementById('formtoedit');
var button = document.getElementById('button_switch');
button.addEventListener('click',function(){
if(this.checked){
form.setAttribute('action','generator/stop');
}else{
form.setAttribute('action','generator/doWork');
}
});
})();
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 80px;
height: 28px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #D40066;
}
input:focus + .slider {
box-shadow: 0 0 1px #D40066;
}
input:checked + .slider:before {
-webkit-transform: translateX(52px);
-ms-transform: translateX(52px);
transform: translateX(52px);
}
/* Rounded sliders */
.slider.round {
border-radius: 28px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formtoedit" action="generator/doWork" method="GET" target="_blank">
<input type="submit" value="Do Work">
</form>
<div class="value" id="onOffSwitch">
<div class="onoffswitch">
<label class="switch">
<input id="button_switch" type="checkbox">
<div class="slider round"></div>
</label>
</div>
</div>
This changes action attribute of form based on button state.
You can achieve this objective by simple jQuery 🙂
$(document).ready(function(){
$('.switch').click(function(){
if ($(this).find('input[type=checkbox]').prop('checked')) {
// When ON
$('form').prop('action', 'generator/enable');
} else {
// When OFF
$('form').prop('action', 'generator/disable');
}
});
});
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 80px;
height: 28px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #D40066;
}
input:focus + .slider {
box-shadow: 0 0 1px #D40066;
}
input:checked + .slider:before {
-webkit-transform: translateX(52px);
-ms-transform: translateX(52px);
transform: translateX(52px);
}
/* Rounded sliders */
.slider.round {
border-radius: 28px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="generator/disable" method="GET" target="_blank">
<input type="submit" value="Do Work">
</form>
<p> </p>
<div class="value" id="onOffSwitch">
<div class="onoffswitch">
<label class="switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
</div>
</div>
Please run the code snippet and see changing of the action of the form via inspect element in chrome ... Let me know :)