0

I want my input box to be visible when a slider is selected. My css code is:

CSS:

input:not(:checked) + .slider2:before {
   content:"Informal";
   .new {
     type: "visible";
   }

}

HTML:

<label class="switch">
  <input type="checkbox" checked>
  <div class="slider"></div>
</label>
<input id="new" type="hidden">

...but it's not working. How can I have it so when input:not(:checked) + .slider2:before is True, set properties of .new? I am open to changing the display, not the input type.

8
  • 2
    This isn't valid CSS... how does your markup look like?
    – andreas
    Oct 25, 2016 at 21:11
  • added my full code
    – Pete
    Oct 25, 2016 at 21:13
  • 1
    There isn't any element of class new...
    – andreas
    Oct 25, 2016 at 21:14
  • oops sorry. one sec
    – Pete
    Oct 25, 2016 at 21:18
  • You cannot do this behavior in css alone..you need to do in javascript
    – Geeky
    Oct 25, 2016 at 21:23

1 Answer 1

2

If you want the text box to be shown only when checkbox is not checked

you can do like this

.switch {
  position: relative;
  display: inline-block;
  /*(sliderwidth*2 + left)*/
  width: 72px;
  height: 34px;
}

/*.switch input {display:none;}*/

.slider {
  
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  background-color: #ccc;
}
.slider:before {
  /*Its the white box*/
  position: absolute;
  content: "";
  height: 26px;
  width: 32px;
  left: 4px;
  bottom: 4px;
  background-color: white;

}
input:checked + .slider {
  background-color: #2196F3;
}
input:checked + .slider:before {
  transform: translateX(32px);
  /*must be same as slider width*/
}

input:checked + .slider:after {
   content:"Off";
} 
input:not(:checked) + .slider:before {
   content:"On";
}



#new {
     display:none;
}

input:not(:checked) + .slider:before {
   content:"Informal";  
}

input:not(:checked) + .slider + #new{
 display:block;
}

#new{
  position:absolute;
  right:20;
  bottom:0;
  margin-left:90px;
  margin-top:0px;
}
<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
  <input id="new" type="text" value="whatever" >
</label>

Hope this helps

3
  • why isn't it straight up against the side?
    – Pete
    Oct 25, 2016 at 21:42
  • I did not understand? what is not straight?
    – Geeky
    Oct 25, 2016 at 21:44
  • the input box isn't even with the switch
    – Pete
    Oct 25, 2016 at 21:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.