Use css to change a property when another property is True - html

Question

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 1

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