使输入字段在隐藏的 div 中可见

【问题标题】：make input field visible inside hidden div使输入字段在隐藏的 div 中可见
【发布时间】：2022-01-12 20:37:15
【问题描述】：

您好，我正在尝试使 <div style="display:none"> 内部的输入字段可见。

<div style="display:none">
   <input type="text" value="xyz" [add some attribute to force this input field to be visible or something]>
</div>

【问题讨论】：

【解决方案1】：

目前，如果父元素具有display: none，则无法使用 CSS 使子元素可见。如果浏览器支持 :has() 选择器（其行为类似于父选择器），您将拥有该功能。

今天我能想到的唯一方法是做你要求的事情需要 JavaScript。

【讨论】：

【解决方案2】：

这是不可能的，但您可以使用此 CSS 隐藏除输入之外的所有其他元素，确保不隐藏父元素。

.input-contain-div *:not(.not-hide) {display:none;}

<div class="input-contain-div">
<input class="not-hide" value="xyz" />
<span>I am hidden</span>
</div>

.input-contain-div *:not(:input.not-hide) {display:none;}

【讨论】：