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

【问题标题】：How to add the text "ON" and "OFF" to toggle button如何将文本“ON”和“OFF”添加到切换按钮
【发布时间】：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>

【问题讨论】：

标签： html css toggle


【解决方案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 询问的不仅仅是切换文本
            猜你喜欢
            • 2018-08-02
            • 2015-04-20
            • 2018-11-16
            • 2020-02-08
            • 1970-01-01
            • 2016-09-23
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多
            热门标签
            Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode