Question

我是CSS新手并且有一个可能很难回答的问题，但我不确定从哪个类开始。

我的目标是将文字（实际上是两位数）整齐地放在切换按钮内（移动的实际滑块为白色）。
我正在使用公开切换示例：

＆＃13;

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

＆＃13;

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider"></span>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

＆＃13;

到目前为止，在HTML中我尝试过<span class="slider round">99</span> 并将color:black添加到.slider:before但这些没有效果。我应该怎么做才能总是看到，例如，切换中白色圆形滑块内的数字99？

Answer 1

尝试在<span class="slider">下为您的号码再插一个包裹，然后您可以轻松地使用它。

   <label class="switch">
      <input type="checkbox" checked>
      <span class="slider round">
         <span class="number">99<span>
      </span>
    </label>

＆＃13;

.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,
.slider .number {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider .number {
  background: none;
  font-size: 14px;
  left: 9px;
  top: 9px;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before,
input:checked+.slider .number {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

＆＃13;

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider">
     <span class="number">99</span>
  </span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider">
     <span class="number">99</span>
  </span>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <span class="slider round">
     <span class="number">99</span>
  </span>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round">
     <span class="number">99</span>
  </span>
</label>

＆＃13;

Answer 2

您可以使用content css作为文字。

The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements.

Stack Snippet

.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: "99";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
      text-align: center;
    line-height: 26px;
}

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%;
}

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
<br>
<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

Answer 3

切换中的白色圆形滑块实际上是.slider:before。因此，您只需将content的{{1}}更改为您的号码（例如99）：

＆＃13;

.slider:before

＆＃13;

.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: "99"; /* -------MIND THIS LINE------- */
  text-align: center; /* Extra css to make it prettier! woosh! */
  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%;
}

＆＃13;

将文本放在切换滑块内

3 个答案: