如何覆盖CSS属性为默认值？

Question

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>

Answer 1

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.

Answer 2

changes, you have added space between select .clearheight

                                        /\ 

fieldset select .clearheight{
height: auto;
}

to

fieldset select.clearheight{
height: auto;
}

Answer 3

试试吧，

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

Answer 4

使用2个类，并使用jquery的addClass和removeClass进行切换。

Answer 5

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/