CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user470760
user470760

Reputation:

How to override css property to default?

Updated

I have set the "height: auto;" property via style on both the fieldset and select elements, however it still results in the select box having the original height specified in the CSS for "fieldset select" which is 20px. If I change that to "auto" in the CSS it works, but as I need to override it, I am at a loss as to what is causing this.

                <fieldset style="width:62%; float:left; margin-left: 19%; height: auto; !important">

                    <select style="height: auto; !important" name="searchable[]" id='searchable' multiple='multiple' size='10' >
                        <option value='1'>127.0.0.1</option>
                        <option value='2'>127.0.0.5</option>
                        <option value='3'>127.0.0.10</option>
                        <option value='4'>127.0.0.15</option>
                        <option value='5'>127.0.0.20</option>
                        <option value='6'>127.0.0.25</option>
                        <option value='7'>127.0.0.30</option>
                        <option value='8'>127.0.0.35</option>
                        <option value='9'>127.0.0.40</option>
                        <option value='10'>127.0.0.45</option>
                        <option value='11'>127.0.0.50</option>
                        <option value='12' SELECTED>127.0.0.55</option>
                        <option value='13' SELECTED>127.0.0.60</option>
                    </select>

                </fieldset><div class="clear"></div>

Upvotes: 0

Views: 622

Answers (5)

link
link

Reputation: 2510

it should be:

fieldset select.clearheight{
  height: auto;
}

You need to chain select and .clearheight

If you need to increase the priority then try this (keep in mind this is bad practice):

fieldset select.clearheight{
  height: auto; !important
}

Hope this helps.

Upvotes: 1

Glegan
Glegan

Reputation: 110

Try this:

HTML: 

<select class="clearheight" name="searchable[]" id='searchable' multiple='multiple' size='10' >
    <option value="1">A</option>
    <option value="1">B</option>
    <option value="1">C</option>
</select>
</fieldset>

CSS:

    fieldset select {
width: 96%;
margin: 0 10px;
border: 1px solid #bbb;
height: 20px;
color: #666666;
}

fieldset .clearheight{
height: auto;
}

Check this out: http://jsfiddle.net/78Fu4/

Upvotes: 0

andypopa
andypopa

Reputation: 536

Use 2 classes and use addClass and removeClass from jquery to toggle them.

Upvotes: 0

user3136030
user3136030

Reputation: 384

Try it,

<fieldset style="width:62%; float:left; margin-left: 19%;height:auto !important">

Upvotes: 0

Girish
Girish

Reputation: 12117

changes, you have added space between select .clearheight

                                        /\ 

fieldset select .clearheight{
height: auto;
}

to

fieldset select.clearheight{
height: auto;
}

Upvotes: 0

Related Questions