Question

我将此复选框设置为看起来像一个开关。我想在其中加上“ON”和“OFF”字样。这就是我遇到的麻烦。

以下是codepen：http://codepen.io/anon/pen/BKMErO

CSS：

.switch-field {
    display: table-cell;
    vertical-align: middle;
}
input.switch {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}
input.switch + label {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input.switch + label, input.switch + label:before, input.switch + label:after {
    -webkit-border-radius: 2.4em;
    -moz-border-radius: 2.4em;
    -ms-border-radius: 2.4em;
    -o-border-radius: 2.4em;
    border-radius: 2.4em;
}
input.switch + label {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
    width: 4.8em;
    height: 2.4em;
    overflow: hidden;
}
input.switch + label:before, input.switch + label:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    content: "";  
}
input.switch + label:before {
  background-color: #bbb;
    right: 0;
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    -o-transition: background 0.3s;
    transition: background 0.3s;
}
input.switch + label:after {
  background-color: #fff;
    width: 2.4em;
    width: calc(2.4em - 2px);
    -webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);

    -webkit-transition: margin 0.3s;
    -moz-transition: margin 0.3s;
    -o-transition: margin 0.3s;
    transition: margin 0.3s;
}
input.switch:checked + label:before {
  background-color: green;
}
input.switch:checked + label:after {
    margin-left: 2.5em;
}

HTML：

<div class="switch-field">

    <input id="cmn-toggle-1" class="switch" type="checkbox">
    <label for="cmn-toggle-1"></label>

</div><!-- /.switch-field -->

Answer 1

试一试 http://codepen.io/Atula/pen/ZWwdmm?editors=0100

CSS

content: 'ON';  
padding: 10px 0;
text-align:center;

Answer 2

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
.switch-field {
    display: table-cell;
    vertical-align: middle;
}
input.switch {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;

}
input.switch + label {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}
input.switch + label, input.switch + label:before, input.switch + label:after {
    -webkit-border-radius: 2.4em;
    -moz-border-radius: 2.4em;
    -ms-border-radius: 2.4em;
    -o-border-radius: 2.4em;
    border-radius: 2.4em;

}
input.switch + label {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
    width: 4.8em;
    height: 2.4em;
    overflow: hidden;

}
input.switch + label:before, input.switch + label:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    content: "";  
}
input.switch + label:before {
  background-color: #bbb;
    right: 0;
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    -o-transition: background 0.3s;
    transition: background 0.3s;

}
input.switch + label:after {
  background-color: #fff;
    width: 2.4em;
    width: calc(2.4em - 2px);
    -webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);

    -webkit-transition: margin 0.3s;
    -moz-transition: margin 0.3s;
    -o-transition: margin 0.3s;
    transition: margin 0.3s;


}
input.switch:checked + label:before {
  background-color: green;
  content :'ON';
  text-align :left;
  color:#fff;
  padding:5px
}
input.switch:checked + label:after {
    margin-left: 2.5em;
      text-align :right;

}
    </style>
</head>


<body>
    <div class="switch-field">

        <input id="cmn-toggle-1" class="switch" type="checkbox">
        <label for="cmn-toggle-1"></label>

    </div><!-- /.switch-field -->
</body>
</html>

在开关样式复选框（codepen）中添加文本

2 个答案: