[SCRIPTSUCHE] Suche Umschalter
- Ersteller mikdoe
- Erstellt am
Schaue hier: Material Style Toggle Switches
kkapsner
Super Moderator
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Custom CSS3 checkbox</title>
<script type="text/javascript"></script>
<style type="text/css">
.checkbox {
display: inline-block;
overflow: hidden;
position: relative;
}
.checkbox .frame {
height: 10px;
width: 20px;
display: inline-block;
border-radius: 50% / 100%;
background-color: lightgray;
border: 1px solid gray;
overflow: hidden;
position: relative;
}
.checkbox input {
position: absolute;
bottom: 100%;
}
.checkbox .frame .knob {
display: inline-block;
position: absolute;
border-radius: 100%;
border: 1px solid lightgray;
background-color: white;
top: 0%;
bottom: 0%;
left: 0%;
right: 50%;
transition: left 0.3s, right 0.3s;
}
.checkbox input:checked + .frame .knob {
left: 50%;
right: 0%;
}
.checkbox input:focus + .frame {
border-color: black;
}
.checkbox .slide {
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 25%;
transition: 0.3s width;
background-color: lightgreen;
}
.checkbox input:checked + .frame .slide {
width: 75%;
}
</style>
</head>
<body>
<label class="checkbox">
<input type="checkbox">
<span class="frame">
<span class="slide"></span>
<span class="knob"></span>
</span>
</label>
<label class="checkbox">
<input type="checkbox">
<span class="frame">
<span class="slide"></span>
<span class="knob"></span>
</span>
</label>
</body>
</html>kkapsner
Super Moderator
Wahrscheinlich schon. Aber eigentlich klingt das nach einem Bug...
Entweder du machst das über JS (also auf den <label>s die ontouch-Eventlistener registrieren und in denen die Checkbox setzen) oder du könntest probieren, die Originalcheckbox anders zu verstecken (z.B. mit bottom: 0% und dafür opacity: 0; ).
- - - Aktualisiert - - -
Im Touchemulationsmodus von Chrome funktioniert bei mir alles. Ev. musst du das Ganze einfach auch nur etwas größer machen...
Entweder du machst das über JS (also auf den <label>s die ontouch-Eventlistener registrieren und in denen die Checkbox setzen) oder du könntest probieren, die Originalcheckbox anders zu verstecken (z.B. mit bottom: 0% und dafür opacity: 0; ).
- - - Aktualisiert - - -
Im Touchemulationsmodus von Chrome funktioniert bei mir alles. Ev. musst du das Ganze einfach auch nur etwas größer machen...
Zuletzt bearbeitet: