能否强制显示<input type="hidden">元素？

直接说结论：没办法强制让原生的<input type="hidden">显示出来。

浏览器对于type="hidden"的输入框有硬编码的渲染规则——它只会作为表单数据的载体存在，底层渲染逻辑会直接跳过视觉绘制，哪怕你设置了display: block、visibility: visible或者宽高，浏览器只会计算它的盒模型尺寸，但根本不会画任何内容出来，这就是你在Chrome里看到尺寸存在但没渲染的原因。

给你两个实用的替代方案，比硬改hidden靠谱：

方案一：用text类型模拟隐藏/显示 #

把输入框的type改成text，默认用CSS隐藏，需要显示时切换样式即可，既保留表单提交功能，又能控制可见性：

<input type="text" class="toggle-input" value="你的表单值">

/* 默认隐藏状态 */
.toggle-input {
  position: absolute;
  left: -9999px;
  opacity: 0;
}
/* 需要显示时的样式 */
.toggle-input.show {
  position: static;
  opacity: 1;
  height: 22px;
  width: 22px;
  border: 1px solid #ddd;
}

方案二：分离数据存储和显示 #

用原生<input type="hidden">专门存数据，同时放一个可见的元素（比如输入框或div）同步它的值，这样两边互不影响：

<input type="hidden" id="hidden-data" value="你的表单值">
<input type="text" id="visible-display" value="你的表单值">

// 同步可见元素和hidden的值
document.getElementById('visible-display').addEventListener('input', function(e) {
  document.getElementById('hidden-data').value = e.target.value;
});

与其浪费时间硬刚浏览器的原生规则，不如用这些变通方案，既满足你的非常规需求，又不会产生奇怪的兼容性问题。

内容的提问来源于stack exchange，提问作者Slbox