如何使用CSS隐藏fieldset

Question

我试图使用CSS隐藏一个字段集。还有其他字段集使用相同的CSS类，我不想隐藏它们。

这是特定字段集的样子;

<fieldset class="span6">
                <legend>Search by User Name</legend>
                <label>
                    User Name:
                    <input id="kusersearch" data-provide="typeahead" name="searchuser" autocomplete="off" value="" type="text">
                </label>

                <label>
                    Exact Name:
                    <input name="exactname" value="1" type="checkbox">
                </label>
</fieldset>

Answer 1

您可以使用nth-child选择器执行此操作，因为它包含same class以下所有字段集，

.span6:nth-child(3){
  border:none;
  background:#ccc;
}

<fieldset class="span6">
                <legend>Search by User Name</legend>
                <label>
                    User Name:
                    <input id="kusersearch" data-provide="typeahead" name="searchuser" autocomplete="off" value="" type="text">
                </label>

                <label>
                    Exact Name:
                    <input name="exactname" value="1" type="checkbox">
                </label>
</fieldset>

<fieldset class="span6">
                <legend>Search by User Name</legend>
                <label>
                    User Name:
                    <input id="kusersearch" data-provide="typeahead" name="searchuser" autocomplete="off" value="" type="text">
                </label>

                <label>
                    Exact Name:
                    <input name="exactname" value="1" type="checkbox">
                </label>
</fieldset>


<fieldset class="span6">
                <legend>Search by User Name</legend>
                <label>
                    User Name:
                    <input id="kusersearch" data-provide="typeahead" name="searchuser" autocomplete="off" value="" type="text">
                </label>

                <label>
                    Exact Name:
                    <input name="exactname" value="1" type="checkbox">
                </label>
</fieldset>


<fieldset class="span6">
                <legend>Search by User Name</legend>
                <label>
                    User Name:
                    <input id="kusersearch" data-provide="typeahead" name="searchuser" autocomplete="off" value="" type="text">
                </label>

                <label>
                    Exact Name:
                    <input name="exactname" value="1" type="checkbox">
                </label>
</fieldset>

Answer 2

为该字段集添加一个id并隐藏它。

唯一ID会将其与具有相同类别的其他元素区分开来。

#unique {
display:none;
}

<fieldset id="unique" class="span6">
                <legend>Search by User Name</legend>
                <label>
                    User Name:
                    <input id="kusersearch" data-provide="typeahead" 
               name="searchuser" autocomplete="off" value="" type="text">
                </label>

                <label>
                    Exact Name:
                    <input name="exactname" value="1" type="checkbox">
                </label>
               </fieldset>

检查其隐藏的代码段。希望这有帮助！

Answer 3

试试吧！只需将隐藏属性与您想要的输入

一起使用即可

<fieldset class="span6">
  <legend>Search by User Name</legend>
  <label>
                    User Name:
                    <input id="kusersearch" data-provide="typeahead" name="searchuser" autocomplete="off" value="" type="text" hidden>
                </label>

  <label>
                    Exact Name:
                    <input name="exactname" value="1" type="checkbox">
                </label>
</fieldset>