通过 CSS 隐藏表单中的字段

Posted

技术标签:

【中文标题】通过 CSS 隐藏表单中的字段【英文标题】:Hiding fields a form in via CSS 【发布时间】:2019-01-27 08:14:30 【问题描述】:

所以我试图隐藏表单中的一些字段。 input type="" 部分很容易通过 ID 隐藏,但是我不知道如何编辑标签类。

在阅读了一些帖子和网站后,我确实尝试了:nth-child() 选择器,但似乎无法正常工作。这就是我所做的。关于我做错了什么以及如何改进的任何建议?:

#fc-calc-result-wraps:nth-child(2n) 
  display: none;
<div class="fc-calc-result-wraps" style="display: block;">
  <div class="input-group">
    <label class="control-label">Total At Retirement:</label>
    <input type="text" class="control num" id="edFV" maxlength="14" size="16" disabled="">
  </div>
  <div class="input-group">
    <label class="control-label">Contributions:</label>
    <input type="text" class="control num" id="edNumPmts" maxlength="3" size="16" disabled="">
  </div>
  <div class="input-group">
    <label class="control-label">Total Invested:</label>
    <input type="text" class="control num" id="edTotalInvested" maxlength="14" size="16" disabled="">
  </div>
  <div class="input-group">
    <label class="control-label">Interest Earned:</label>
    <input type="text" class="control num" id="edInterest" maxlength="14" size="16" disabled="">
  </div>
  <div class="input-group tail">
    <label class="control-label">Last Deposit Date:</label>
    <input type="text" class="control num" id="edFVDate" maxlength="14" size="16" disabled="">
  </div>
</div>

【问题讨论】:

您的 &lt;label&gt; 缺少 for= 属性 - 正确添加并使用它。 请注意正确格式化您的问题。在我编辑之前,它最初看起来没有 html 示例,这对于解决问题至关重要。 @RoryMcCrossan:格式预览显示它工作正常,但是当我看到最初的问题时,我发现 HTML 示例不可用。当我开始编辑时,你做了谢谢你这样做! 您能更具体地说明您要隐藏的内容吗?您的选择器正在使用 id (#) 但您有一个类并且标签是子元素,因此等效为:.fc-calc-result-wraps .input-group :nth-child(2) 隐藏所有 输入 @freedomn-m 我试图隐藏“贡献”字段 【参考方案1】:

试试这个:

.fc-calc-result-wraps > div:nth-child(2)
  display: none;

https://codepen.io/anon/pen/RYwvQb

【讨论】:

以上是关于通过 CSS 隐藏表单中的字段的主要内容,如果未能解决你的问题,请参考以下文章

如何根据 Django 下拉菜单中的选择显示和隐藏表单字段

如何隐藏隐藏字段中的值?

fastadmin隐藏表单字段延迟

解析rails中的表单隐藏字段

如何从 URL 获取值并将其添加为联系表 7 中的隐藏字段

根据另一个字段中的选择显示/隐藏 django 管理表单字段