添加文本到CSS复选框开关 [英] Adding text to CSS checkbox switch

问题描述

我试图设计一个复选框，看起来像只使用CSS的开关，并尽可能使用 em ，以便它可以缩放到任意大小和仍然看起来不错。

我有一个看起来非常尖锐的人，我只想在交换机本身内添加像ON/OFF这样的文本的能力，这就是我需要你帮助的地方。

以下是我到目前为止：

JSfiddle： https://jsfiddle.net/rcsngjhm/2/

  .switch {display：table-cell; vertical-align：middle; padding：10px;}。cmn-toggle {position：absolute; margin-left：-9999px; visibility：hidden;}。cmn-toggle + label {display：block;位置：相对;光标：指针;概要：无; -webkit-user-select：none; -moz-user-select：none; -ms-user-select：none; user-select：none;} input.cmn-toggle-jwr + label {width：3em;身高：1.5em; background-color：#dddddd; -webkit-border-radius：1.5em; -moz-border-radius：1.5em; -ms-border-radius：1.5em; -o-border-radius：1.5em; border-radius：1.5em; overflow：hidden;} input.cmn-toggle-jwr + label：before，input.cmn-toggle-jwr + label：after {display：block;位置：绝对; top：1px; left：1px;底部：1px; content：;} input.cmn-toggle-jwr + label：before {right：1px; background-color：＃f1f1f1; -webkit-border-radius：1.5em; -moz-border-radius：1.5em; -ms-border-radius：1.5em; -o-border-radius：1.5em; border-radius：1.5em; -webkit-transition：背景0.3s; -moz-transition：背景0.3s; -o-transition：背景0.3s; transition：background 0.3s;} input.cmn-toggle-jwr + label：after {width：1.5em; width：calc（1.5em  -  2px）; background-color：#fff; -webkit-border-radius：100％; -moz-border-radius：100％; -ms-border-radius：100％; -o-border-radius：100％;边界半径：100％; -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：保证金0.3s; -moz-transition：保证金0.3s; -o-transition：保证金0.3s;转换：margin 0.3s;} input.cmn-toggle-jwr：checked + label：before {background-color：＃8ce196;} input.cmn-toggle-jwr：checked + label：after {margin-left：1.5em; }  

 < div class =switch> < input id =cmn-toggle-1class =cmn-toggle cmn-toggle-jwrtype =checkbox> < label for =cmn-toggle-1>< / label>< / div>  

另外，如果您看到任何方法，我可以再清理一次，请告诉我。

解决方案

可能不得不调整字体大小，边距等。 > 更新的小提琴

$ b

  .em1-0 {font-size：1em;}。 em4-0 {font-size：4em;}。switch {display：table-cell; vertical-align：middle; padding：10px;}。cmn-toggle {position：absolute; margin-left：-9999px; visibility：hidden;}。cmn-toggle + label {display：block;位置：相对;光标：指针;概要：无; -webkit-user-select：none; -moz-user-select：none; -ms-user-select：none; user-select：none;} input.cmn-toggle-jwr + label {width：3em;身高：1.5em; background-color：#dddddd; -webkit-border-radius：1.5em; -moz-border-radius：1.5em; -ms-border-radius：1.5em; -o-border-radius：1.5em; border-radius：1.5em; overflow：hidden;} input.cmn-toggle-jwr + label：before，input.cmn-toggle-jwr + label：after {display：block;位置：绝对; top：1px; left：1px;底部：1px; content：;} input.cmn-toggle-jwr + label：before {right：1px; background-color：＃f1f1f1; -webkit-border-radius：1.5em; -moz-border-radius：1.5em; -ms-border-radius：1.5em; -o-border-radius：1.5em; border-radius：1.5em; -webkit-transition：背景0.3s; -moz-transition：背景0.3s; -o-transition：背景0.3s;过渡：背景0.3s; / *添加了这四个* / font-size：0.75em;内容：关; text-align：right; padding：0.25em 0.35em;} input.cmn-toggle-jwr + label：after {width：1.5em; width：calc（1.5em  -  2px）; background-color：#fff; -webkit-border-radius：100％; -moz-border-radius：100％; -ms-border-radius：100％; -o-border-radius：100％;边界半径：100％; -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：保证金0.3s; -moz-transition：保证金0.3s; -o-transition：保证金0.3s; transition：margin 0.3s;} input.cmn-toggle-jwr：checked + label：before {background-color：＃8ce196; / *添加了这两个* / content：on; text-align：left;} input.cmn-toggle-jwr：checked + label：after {margin-left：1.5em;}  

 < div class =switch em4-0> < input id =cmn-toggle-0class =cmn-toggle cmn-toggle-jwrtype =checkbox> < label for =cmn-toggle-0>< / label>< / div>< br />< div class =switch em1-0> < input id =cmn-toggle-1class =cmn-toggle cmn-toggle-jwrtype =checkbox> < / label>< / code>< / pre>< / div> 

< /

I am trying to design a checkbox that looks like a switch using only CSS, and keeping as much as possible using em so that it can be scaled to any size and still look good.

I've got one looking really sharp, I would just like the ability to add text like "ON" / "OFF" inside the switch itself, and that's where I need your help.

Here's what I have so far:

JSfiddle: https://jsfiddle.net/rcsngjhm/2/

.switch {
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}
.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input.cmn-toggle-jwr + label {
  width: 3em;
  height: 1.5em;
  background-color: #dddddd;
  -webkit-border-radius: 1.5em;
  -moz-border-radius: 1.5em;
  -ms-border-radius: 1.5em;
  -o-border-radius: 1.5em;
  border-radius: 1.5em;
  overflow: hidden;
}
input.cmn-toggle-jwr + label:before,
input.cmn-toggle-jwr + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.cmn-toggle-jwr + label:before {
  right: 1px;
  background-color: #f1f1f1;
  -webkit-border-radius: 1.5em;
  -moz-border-radius: 1.5em;
  -ms-border-radius: 1.5em;
  -o-border-radius: 1.5em;
  border-radius: 1.5em;
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  -o-transition: background 0.3s;
  transition: background 0.3s;
}
input.cmn-toggle-jwr + label:after {
  width: 1.5em;
  width: calc(1.5em - 2px);
  background-color: #fff;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  -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.cmn-toggle-jwr:checked + label:before {
  background-color: #8ce196;
}
input.cmn-toggle-jwr:checked + label:after {
  margin-left: 1.5em;
}

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

Also, if you see any way I can clean this up a bit more, please let me know.

解决方案

I modified the CSS a bit to try to have the text inside the switch.

Depending on how big you want the text to be, you might have to adjust the font-size, margins, etc.

See updated fiddle

.em1-0 {
  font-size: 1em;
}

.em4-0 {
  font-size: 4em;
}

.switch {
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}

.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input.cmn-toggle-jwr + label {
  width: 3em;
  height: 1.5em;
  background-color: #dddddd;
  -webkit-border-radius: 1.5em;
  -moz-border-radius: 1.5em;
  -ms-border-radius: 1.5em;
  -o-border-radius: 1.5em;
  border-radius: 1.5em;
  overflow: hidden;
}

input.cmn-toggle-jwr + label:before,
input.cmn-toggle-jwr + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}

input.cmn-toggle-jwr + label:before {
  right: 1px;
  background-color: #f1f1f1;
  -webkit-border-radius: 1.5em;
  -moz-border-radius: 1.5em;
  -ms-border-radius: 1.5em;
  -o-border-radius: 1.5em;
  border-radius: 1.5em;
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  -o-transition: background 0.3s;
  transition: background 0.3s;
  /* added these four */
  font-size: 0.75em;
  content:"off";
  text-align: right;
  padding: 0.25em 0.35em;
}

input.cmn-toggle-jwr + label:after {
  width: 1.5em;
  width: calc(1.5em - 2px);
  background-color: #fff;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  -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.cmn-toggle-jwr:checked + label:before {
  background-color: #8ce196;
  /* added these two */
  content: "on";
  text-align:left;
}

input.cmn-toggle-jwr:checked + label:after {
  margin-left: 1.5em;
}

<div class="switch em4-0">
  <input id="cmn-toggle-0" class="cmn-toggle cmn-toggle-jwr" type="checkbox">
  <label for="cmn-toggle-0"></label>
</div>

<br />

<div class="switch em1-0">
  <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-jwr" type="checkbox">
  <label for="cmn-toggle-1">on</label>
</div>

这篇关于添加文本到CSS复选框开关的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！