From f340642a3120295f7a6e4d34d1afd4b02251f830 Mon Sep 17 00:00:00 2001 From: stitz Date: Mon, 20 Apr 2020 00:35:04 +0200 Subject: [PATCH] checkbox switch --- switch.css | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 switch.css diff --git a/switch.css b/switch.css new file mode 100644 index 0000000..93dace6 --- /dev/null +++ b/switch.css @@ -0,0 +1,37 @@ +input.switch[type="checkbox"] { + display:none; +} +input.switch[type="checkbox"] + label { + width: 60px; + height: 30px; + border-radius: 30px; + border: 2px solid #ddd; + background-color: #EEE; + display: inline-block; + content: ""; + float: left; + margin-right: 5px; + transition: background-color 0.5s linear; + margin-top: 15px; +} +input.switch[type="checkbox"] + label:hover { + cursor: pointer; +} +input.switch[type="checkbox"] + label::before { + width: 30px; + height: 30px; + border-radius: 30px; + background-color: #fff; + display: block; + content: ""; + float: left; + margin-right: 5px; + transition: margin 0.1s linear; + box-shadow: 0px 0px 5px #aaa; +} +input.switch[type="checkbox"]:checked+label{ + background-color: #2b8718; +} +input.switch[type="checkbox"]:checked+label::before { + margin: 0 0 0 30px; +} \ No newline at end of file