Cách tạo 1 Switch trên iPhone bằng HTML và CSS

Upload Ảnh · Register wap4.co free

Tìm kiếm | Lượt xem: 139

Lê Văn Đức (Admin) [OFF]

Information Technology Việt Nam

Cách đây 3 tháng

Thấy hay hay nên copy về ae ngắm:

HTML:

CSS:

.container {
display: block;
position: relative;
width: 55px;
height: 30px;
margin: 50px auto;
}

.container > input[type = checkbox] {
display: none;
}

.background {
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: white;
border-radius: 30px;
transition: 0.25s;
border: 2px solid #eeeeee;
}

.mask {
display: block;
position: absolute;
width: 30px;
height: 30px;
background-color: white;
box-shadow: 1px 1px 3px silver;
border-radius: 50%;
left: 2px;
top: 2px;
transition: 0.25s;
cursor: pointer;
}

.container > input[type = checkbox]:checked + .background {
background-color: #4cd964;
border-color: #4cd964;
}

.container > input[type = checkbox]:checked ~ .mask {
left: 27px;
}

.container { display: block; position: relative; width: 55px; height: 30px; margin: 50px auto; } .container > input[type = checkbox] { display: none; } .background { display: block; position: absolute; width: 100%; height: 100%; background-color: white; border-radius: 30px; transition: 0.25s; border: 2px solid #eeeeee; } .mask { display: block; position: absolute; width: 30px; height: 30px; background-color: white; box-shadow: 1px 1px 3px silver; border-radius: 50%; left: 2px; top: 2px; transition: 0.25s; cursor: pointer; } .container > input[type = checkbox]:checked + .background { background-color: #4cd964; border-color: #4cd964; } .container > input[type = checkbox]:checked ~ .mask { left: 27px; }

Nguồn: Viblo

• Share CSS menu drop responsive không cần dùng bootstrap [1]

• JavaScript - Code thông báo khi vào website [1]

• Share code lời chào theo buổi bằng JavaScript [1]

• Code thay tất cả link trong wap thành link mới bằng JavaScript [1]