Add Value to flip toggle switch

Question

I have this flip switch, how to change to yes or No. But I can change green to red, but adding text to it is really challenging for me. How to add text, to this slider. When Green color comes it should be yes and when Red it should be No. I need switch like this given in link https://drive.google.com/file/d/0B9lIGoSQI3nHQVhJd1k4UDhGU0k/view?usp=sharing

<style>
  .cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
  }
  .cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
  }
  input.cmn-toggle-round + label {
    padding: 2px;
    width: 120px;
    height: 60px;
    background-color: #dddddd;
    border-radius: 60px;
  }
  input.cmn-toggle-round + label:before,
  input.cmn-toggle-round + label:after {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: "";
  }
  input.cmn-toggle-round + label:before {
    right: 1px;
    background-color: #f1f1f1;
    border-radius: 60px;
    transition: background 0.4s;
  }
  input.cmn-toggle-round + label:after {
    width: 58px;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: margin 0.4s;
  }
  input.cmn-toggle-round:checked + label:before {
    background-color: #8ce196;
  }
  input.cmn-toggle-round:checked + label:after {
    margin-left: 60px;
  }

 HTML code:

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

Jesse · Answer 1 · 2015-10-02T20:38:35.637

1

You just need to change the "content" when it is checked to Yes and No

.cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
  }
  .cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
  }
  input.cmn-toggle-round + label {
    padding: 2px;
    width: 120px;
    height: 60px;
    background-color: #dddddd;
    border-radius: 60px;
  }
  input.cmn-toggle-round + label:before,
  input.cmn-toggle-round + label:after {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
      text-align:center;
  }
  input.cmn-toggle-round + label:before {
    right: 1px;
    background-color: #f1f1f1;
    border-radius: 60px;
    transition: background 0.4s;
  }
  input.cmn-toggle-round + label:after {
    width: 58px;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: margin 0.4s;
      line-height:390%;
      content:"NO";
  }
  input.cmn-toggle-round:checked + label:before {
    background-color: #8ce196;
      content:"";
  }
  input.cmn-toggle-round:checked + label:after {
    margin-left: 60px;
      content:"YES";
  }

.switch{
    display:flex;
    margin:auto;
}

edited Oct 02 '15 at 20:38

answered Oct 02 '15 at 17:44

Jesse

1,262
1
9
19

actually the content is not placing exactly inside. the switch , I tried with padding too , kind of moving from its exact position. – Tangle Designer Oct 02 '15 at 18:29
so you are saying you want the word to be outside of the switch? to the side? or underneath? – Jesse Oct 02 '15 at 18:30
does it need to be positioned in the middle both horizontally and vertically? or is it okay to be inside but at the top of the switch? – Jesse Oct 02 '15 at 20:28
@TangleDesigner I have updated the CSS, it should now be centered in the middle of the switch :) let me know if it works! And if it is what you wanted, be sure to accept the answer! Thank you – Jesse Oct 02 '15 at 20:39
Thanks for your reply, but I am looking for that in side green color.When green color is switched it should be having Yes on the middle of green color part. Like given image , please check in this link below https://drive.google.com/file/d/0B9lIGoSQI3nHQVhJd1k4UDhGU0k/view?usp=sharing – Tangle Designer Oct 03 '15 at 08:13

Add Value to flip toggle switch

1 Answers1