MLavazza
Joined 3 December 2020
No edit summary |
No edit summary |
||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
<html> | |||
<style> | |||
.slider-alt { | |||
position: absolute; | |||
cursor: pointer; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
background-color: #4c4c4c; | |||
-webkit-transition: .4s; | |||
transition: .4s; | |||
border-radius: 17px; | |||
} | |||
.slider-alt:before { | |||
position: absolute; | |||
content: ""; | |||
height: 13px; | |||
width: 13px; | |||
left: 2px; | |||
bottom: 2px; | |||
background-color: white; | |||
-webkit-transition: .4s; | |||
transition: .4s; | |||
border-radius: 50%; | |||
} | |||
.slider-alt { | |||
background-color: #4c4c4c; | |||
} | |||
.slider-alt:before { | |||
-webkit-transform: translateX(13px); | |||
-ms-transform: translateX(13px); | |||
transform: translateX(13px); | |||
} | |||
</style> | |||
<script> | |||
function toggleView() { | |||
console.log('clicked!'); | |||
document.getElementById('slider').classList.add("slider-alt"); | |||
} | |||
</script> | |||
</html> | |||
<!--<html> | |||
<label class="switch"> | |||
<input type="checkbox" onclick="toggleListTable()"> | |||
<span class="slider-alt"></span> | |||
</label> | |||
</html>--> | |||
<html> | |||
<div class="switch"> | |||
<div id="switch-input" onclick="toggleView()"> | |||
<span id="slider" class="slider"></span> | |||
</div> | |||
</html> | |||
Latest revision as of 11:00, 12 May 2024