Adding text to CSS checkbox switch

Question

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.

Do you mean text inside the switch? kind of like this: jsfiddle.net/rcsngjhm/3? — blurfus
– blurfus, Commented May 6, 2016 at 18:52
@ochi Yes, like that. I would just have to tweak it to get it to line up right. EDIT: Ideally, I would like the text to remain there until it's hidden by the switch (not fade out) — MultiDev
– MultiDev, Commented May 6, 2016 at 18:54

blurfus · Accepted Answer · 2016-05-06 18:57:12Z

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>

Collectives™ on Stack Overflow

Adding text to CSS checkbox switch

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related