Question

我希望在选择滑块时可以看到我的输入框。我的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为True，如何设置.new的属性？我愿意改变显示，而不是输入类型。

Answer 1

如果您希望仅在未选中复选框时显示文本框

你可以这样做

.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>

希望这有帮助

当另一个属性为True时，使用css更改属性

1 个答案: