1. 首頁
  2. 問答
  3. 如何將文本「ON」和「OFF」添加到切換按鈕

如何將文本「ON」和「OFF」添加到切換按鈕

2016-10-04 186 views
7

在我的項目中，我想在現有的切換代碼上添加一個文本。所以我想這樣，當切換ON時應該顯示文本「ON」如果關閉，則顯示「OFF」文本。我無法將其更改爲其他切換，因爲它已經有一個使用它的後端。我只想輸入「ON」和「OFF」文本。謝謝。如何將文本「ON」和「OFF」添加到切換按鈕

這裏是我的代碼 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%;

來源

2016-10-04 KennethLazos

回答

-3

試試這個

.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>

來源

2016-10-04 07:16:29 vinit

+0

只是想在按鈕主控上添加「ON」和「OFF」文本:) – KennethLazos

+0

@KennethLazos詢問文本不僅僅是切換 – MJK

17

你可以做這樣的：

.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>

或純CSS：

.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>

來源

2016-10-04 07:31:04 Goombah

+1

如何設置基於條件的表單加載後以編程方式檢查的值？我已經使用了你的答案的純css版本和新的web開發。 –

+1

得到我的答案，使用一個變量，並在輸入標籤內使用內嵌的PHP回聲..感謝。 –

相關問題

 相關問題