如何将文本“ON”和“OFF”添加到切换按钮

Posted

技术标签:

【中文标题】如何将文本“ON”和“OFF”添加到切换按钮【英文标题】：How to add the text "ON" and "OFF" to toggle button 【发布时间】：2017-02-12 06:20:46 【问题描述】：

在我的项目中，我想在现有的切换代码上添加一个文本。所以我想要这样，当切换为 ON 时，它应该显示文本“ON”，如果切换关闭，则显示“OFF”文本。我无法将其更改为其他切换，因为它已经有一个使用它的后端。我只想输入“ON”和“OFF”文本。谢谢。

这是我的代码

  .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%;
<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"></span></div></label>

【问题讨论】：

这里是示例代码。 aspdotnetkhan.com/toggle-switch-68.aspx 【参考方案1】：

你可以这样做：

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

【讨论】：

如何根据条件设置表单加载后以编程方式检查的值？我已经使用了您答案的纯 CSS 版本，并且是网络开发的新手。 得到了我的答案，使用变量并在输入标签内使用内联 php 回显。无论如何，谢谢。 如何使第一个选项符合 ada 标准？ 最好使用ems 进行大小调整等，这样更容易响应：jsfiddle.net/d0g4tbcj document.getElementById('togBtn').checked 是获得其价值的正确方法。之前尝试过 val() 并没有奏效。可能会帮助某人。【参考方案2】： 

.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%;
&lt;label class="switch"&gt;&lt;input type="checkbox" id="togBtn"&gt;&lt;div class="slider round"&gt;&lt;!--ADDED HTML --&gt;&lt;span class="on"&gt;Confirmed&lt;/span&gt;&lt;span class="off"&gt;NA&lt;/span&gt;&lt;!--END--&gt;&lt;/div&gt;&lt;/label&gt;

【讨论】：

欢迎来到 Stack Overflow。您能否简要说明您在代码中所做的更改以及为什么它可以解决问题？ 请在您的代码中添加一个 cmets - 解释作者为什么这是他/她的问题的答案。【参考方案3】： 
    .switch
    
            width: 50px;
            height: 30px;
            position: relative;
            display:inline-block;
    

    .switch input
    
            display: none;
    

    .slider
    
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            cursor: pointer;
            background-color: gray;
            border-radius: 30px;

    
    .slider:before
    

        position: absolute;
        background-color: #fff;
        height: 20px;
        width: 20px;
        content: "";
        left: 5px;
        bottom: 5px;
        border-radius: 50%;
        transition: ease-in-out .5s;
    

    .slider:after
    
        content: "Off";

        color: white;
        display: block;
        position: absolute;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 70%;
        transition: all .5s;
        font-size: 10px;
        font-family: Verdana,sans-serif;
    

    input:checked + .slider:after
    
        transition: all .5s;
        left: 30%;
        content: "On"

    
    input:checked + .slider
    
        background-color: blue;

    

    input:checked + .slider:before
    
        transform: translateX(20px);
    



    **The HTML CODE**

    <label class="switch">

                <input type="checkbox"/>

                 <div class="slider">

                </div>
        </label>


If You want to add long text like activate or Deactivate

just make few changes 

.switch

        width:90px

.slider:after

     left: 60%; //as you want in percenatge

input:checked + .slider:after

       left:40%; //exactly opposite of .slider:after 


and last

input:checked + .slider:before

    transform: translateX(60px); //as per your choice but 60px is perfect

内容根据您选择的“开”和“关”进行选择

【讨论】：

【参考方案4】：

可以通过修改边框半径添加方形版本的切换

.switch 
  position: relative;
  display: inline-block;
  width: 90px;
  height: 36px;


.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: 6px;


.slider:before 
  position: absolute;
  content: "";
  height: 34px;
  width: 32px;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  background-color: white;
  transition: 0.4s;
  border-radius: 6px;


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


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

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

【讨论】：

【参考方案5】：

看看这个例子

.switch 
        width: 50px;
        height: 17px;
        position: relative;
        display: inline-block;
    

        .switch input 
            display: none;
        

        .switch .slider 
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            cursor: pointer;
            background-color: #e7ecf1;
            border-radius: 30px !important;
            border: 0;
            padding: 0;
            display: block;
            margin: 12px 10px;
            min-height: 11px;
        

            .switch .slider:before 
                position: absolute;
                background-color: #aaa;
                height: 15px;
                width: 15px;
                content: "";
                left: 0px;
                bottom: -2px;
                border-radius: 50%;
                transition: ease-in-out .5s;
            

            .switch .slider:after 
                content: "";
                color: white;
                display: block;
                position: absolute;
                transform: translate(-50%,-50%);
                top: 50%;
                left: 70%;
                transition: all .5s;
                font-size: 10px;
                font-family: Verdana,sans-serif;
            

        .switch input:checked + .slider:after 
            transition: all .5s;
            left: 30%;
            content: "";
        

        .switch input:checked + .slider 
            background-color: #d3d6d9;
        

            .switch input:checked + .slider:before 
                transform: translateX(15px);
                background-color: #26a2ac;
            
<label class="switch">
                                        <input type="checkbox" />
                                        <div class="slider"></div>
                                    </label>

【讨论】：

【参考方案6】：

采用极简方法的纯 CSS

您只需要一个带有背景作为滑块的复选框和您的content，开/关。结果是可以使用键盘和屏幕阅读器。

input 
  appearance: none;
  width: 64px;
  padding-left: 33px;
  margin: 0;
  border-radius: 16px;
  background: radial-gradient(circle 12px, white 100%, transparent calc(100% + 1px)) #ccc -16px;
  transition: 0.3s ease-in-out;


input::before 
  content: "OFF";
  font: bold 12px/32px Verdana;
  color: white;
  text-shadow: 0 1px black;


:checked 
  padding-left: 8px;
  background-color: dodgerBlue;
  background-position: 16px;


:checked::before 
  content: "ON";

&lt;input type="checkbox"&gt;

【讨论】：

【参考方案7】：

这里我用 CSS 做了一个切换按钮：

.switch 
  position: relative;
  display: inline-block;
  width: 100%;
  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(165px);
  -ms-transform: translateX(165px);
  transform: translateX(200px);


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

这是带有文本的切换按钮的 HTML 代码：

<input type="checkbox" id="togBtn">
<div class="slider round">
    <!--ADDED HTML -->
    <span class="on">BOOKED</span>
    <span class="off">AVAILABLE</span>
    <!--END-->
</div>

【讨论】：

【参考方案8】：

试试这个

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

【讨论】：

只是想在按钮母版上添加“ON”和“OFF”文本:) @KennethLazos 询问的不仅仅是切换文本

以上是关于如何将文本“ON”和“OFF”添加到切换按钮的主要内容，如果未能解决你的问题，请参考以下文章

在 Vuejs 中切换两个类

更改切换按钮 Android 的开/关文本

如何以编程方式切换uiswitch按钮

如何找到切换按钮崩溃的原因？

单击单选按钮以使用 jquery 切换开关

如何在TableRow中使用Android填充宽度制作切换按钮