我希望在选择滑块时可以看到我的输入框。我的CSS代码是：当另一个属性为True时使用css更改属性
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">
...但它不工作。我怎么能这样，当input:not(:checked) + .slider2:before是真的，设置属性.new？我愿意改变显示器，而不是输入类型。
如果你想显示的文本框中只有当复选框未选中
你可以像这样
.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>希望这有助于
这ISN” t有效的CSS ...你的标记是怎么样的？ – andreas
添加了我的完整代码 – Pete
没有任何类“新”的元素... – andreas