CODEWITHSUNDEEP
css
velieb
velieb

Reputation: 11

How to hide fieldset using CSS

I am trying to hide one fieldset using CSS. There are other fieldsets using same CSS class, and I don't want to hide them.

This is how the specific filedset looks like;

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

Upvotes: 1

Views: 5021

Answers (3)

Momin
Momin

Reputation: 3320

Try This ! Just use hidden attribute with your desired input

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

Upvotes: 0

neophyte
neophyte

Reputation: 6626

Give a id to that fieldset and hide it.

AN unique ID will differentiate it from other elements having the same class.

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

Check the snippet its hidden. Hope this helps!

Upvotes: 0

frnt
frnt

Reputation: 8795

You could do that using nth-child selector as it consist of same class for all fieldsets below,

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

Upvotes: 2

Related Questions