CODEWITHSUNDEEP
htmlcssjquery-mobilejquery-mobile-flipswitch
Tangle Designer
Tangle Designer

Reputation: 25

Add Value to flip toggle switch

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>

Upvotes: 1

Views: 782

Answers (1)

Jesse
Jesse

Reputation: 1262

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

Upvotes: 1

Related Questions