Pete Pete - 1 month ago 7
CSS Question

Use css to change a property when another property is True

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.

Answer

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

Comments