Add text inside switch styled checkbox (codepen)

Question

I styled up this checkbox to look like a switch. I would like to put the words "ON" and "OFF" inside of it. That's what I'm having trouble with.

Here is the 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 -->

why this doesn't help? stackoverflow.com/questions/37079291/… — Jakob
– Jakob, Commented May 10, 2016 at 0:26

Atula · Accepted Answer · 2016-05-10 05:41:37Z

0

Give this a try
http://codepen.io/Atula/pen/ZWwdmm?editors=0100

css

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

answered May 10, 2016 at 5:41

Atula

2,1732 gold badges14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mir · Accepted Answer · 2016-05-10 05:55:47Z

<!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>

Collectives™ on Stack Overflow

Add text inside switch styled checkbox (codepen)

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related