CSSを使用してフィールドセットを非表示にする方法

Question

CSSを使用して1つのフィールドセットを非表示にしようとしています。同じ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

このフィールドセットに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>

その隠されたスニペットを確認してください。お役に立てれば！あなたはnth-childセレクタを使用すると、それは以下のすべてのフィールドセットのためsame classで構成されていることを行うことができ

Answer 2

、

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