Cách thêm văn bản "BẬT" và "TẮT" để chuyển nút

Trong dự án của tôi, tôi muốn thêm văn bản trên mã chuyển đổi hiện tại của mình. Vì vậy, tôi muốn như thế này, Khi Toggles ON nó sẽ hiển thị văn bản "BẬT" và hiển thị văn bản "OFF" nếu tắt. Tôi không thể thay đổi nó để chuyển đổi khác bởi vì nó đã có một phụ trợ bằng cách sử dụng nó. Tôi chỉ muốn nhập văn bản "BẬT" và "TẮT". Cảm ơn bạn.Cách thêm văn bản "BẬT" và "TẮT" để chuyển nút

Đây là mã của tôi HTML:

<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"></span></div></label>

CSS:

.switch input {display:none;} 

.slider { 
    position: absolute; 
    cursor: pointer; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #ca2222; 
    -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: #2ab934; 
} 

input:focus + .slider { 
    box-shadow: 0 0 1px #2196F3; 
} 

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%;

Nguồn

2016-10-04 KennethLazos

-3

thử này

.switch { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 60px; 
 
    height: 34px; 
 
} 
 

 
.switch input {display:none;} 
 

 
.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); 
 
} 
 

 
/* Rounded sliders */ 
 
.slider.round { 
 
    border-radius: 34px; 
 
} 
 

 
.slider.round:before { 
 
    border-radius: 50%; 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Untitled Document</title> 
 
</head> 
 

 
<body> 
 

 
<h2>Toggle Switch</h2> 
 

 
<label class="switch"> 
 
    <input type="checkbox"> 
 
    <div class="slider"></div> 
 
</label> 
 

 
<label class="switch"> 
 
    <input type="checkbox" checked> 
 
    <div class="slider"></div> 
 
</label><br><br> 
 

 
<label class="switch"> 
 
    <input type="checkbox"> 
 
    <div class="slider round"></div> 
 
</label> 
 

 
<label class="switch"> 
 
    <input type="checkbox" checked> 
 
    <div class="slider round"></div> 
 
</label> 
 

 
</body> 
 
</html>

Nguồn

2016-10-04 07:16:29 vinit

Chỉ muốn thêm văn bản "BẬT" và "TẮT" trên nút chính :) – KennethLazos

@KennethLazos hỏi về văn bản không chỉ chuyển đổi – MJK

Bạn có thể làm điều đó như thế này:

.switch { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 90px; 
 
    height: 34px; 
 
} 
 

 
.switch input {display:none;} 
 

 
.slider { 
 
    position: absolute; 
 
    cursor: pointer; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-color: #ca2222; 
 
    -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: #2ab934; 
 
} 
 

 
input:focus + .slider { 
 
    box-shadow: 0 0 1px #2196F3; 
 
} 
 

 
input:checked + .slider:before { 
 
    -webkit-transform: translateX(55px); 
 
    -ms-transform: translateX(55px); 
 
    transform: translateX(55px); 
 
} 
 

 
/*------ ADDED CSS ---------*/ 
 
.on 
 
{ 
 
    display: none; 
 
} 
 

 
.on, .off 
 
{ 
 
    color: white; 
 
    position: absolute; 
 
    transform: translate(-50%,-50%); 
 
    top: 50%; 
 
    left: 50%; 
 
    font-size: 10px; 
 
    font-family: Verdana, sans-serif; 
 
} 
 

 
input:checked+ .slider .on 
 
{display: block;} 
 

 
input:checked + .slider .off 
 
{display: none;} 
 

 
/*--------- END --------*/ 
 

 
/* Rounded sliders */ 
 
.slider.round { 
 
    border-radius: 34px; 
 
} 
 

 
.slider.round:before { 
 
    border-radius: 50%;}

<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"><!--ADDED HTML --><span class="on">ON</span><span class="off">OFF</span><!--END--></div></label>

Hoặc CSS tinh khiết:

.switch { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 90px; 
 
    height: 34px; 
 
} 
 

 
.switch input {display:none;} 
 

 
.slider { 
 
    position: absolute; 
 
    cursor: pointer; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-color: #ca2222; 
 
    -webkit-transition: .4s; 
 
    transition: .4s; 
 
    border-radius: 34px; 
 
} 
 

 
.slider:before { 
 
    position: absolute; 
 
    content: ""; 
 
    height: 26px; 
 
    width: 26px; 
 
    left: 4px; 
 
    bottom: 4px; 
 
    background-color: white; 
 
    -webkit-transition: .4s; 
 
    transition: .4s; 
 
    border-radius: 50%; 
 
} 
 

 
input:checked + .slider { 
 
    background-color: #2ab934; 
 
} 
 

 
input:focus + .slider { 
 
    box-shadow: 0 0 1px #2196F3; 
 
} 
 

 
input:checked + .slider:before { 
 
    -webkit-transform: translateX(26px); 
 
    -ms-transform: translateX(26px); 
 
    transform: translateX(55px); 
 
} 
 

 
/*------ ADDED CSS ---------*/ 
 
.slider:after 
 
{ 
 
content:'OFF'; 
 
color: white; 
 
display: block; 
 
position: absolute; 
 
transform: translate(-50%,-50%); 
 
top: 50%; 
 
left: 50%; 
 
font-size: 10px; 
 
font-family: Verdana, sans-serif; 
 
} 
 

 
input:checked + .slider:after 
 
{ 
 
    content:'ON'; 
 
} 
 

 
/*--------- END --------*/

<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"></div></label>

Nguồn

2016-10-04 07:31:04 Goombah

làm cách nào tôi có thể đặt giá trị được kiểm tra theo chương trình sau khi tải biểu mẫu dựa trên điều kiện? tôi đã sử dụng phiên bản css thuần túy của câu trả lời của bạn và mới cho trang web dev. –

nhận được câu trả lời của tôi, sử dụng một biến và sử dụng một nội tuyến php echo bên trong thẻ đầu vào..thanks anyway. –

Một giải pháp rất đơn giản để chuyển đổi hộp kiểm đầu vào cho Toggles: https://proto.io/freebies/onoff/
Hoặc bạn có thể sử dụng nền tảng zurb 's chuyển đổi. http://foundation.zurb.com/sites/docs/switch.html

Nguồn

2017-09-12 07:48:40

Cách thêm văn bản "BẬT" và "TẮT" để chuyển nút

Trả lời

Các vấn đề liên quan