How to ignore parent css style

I'm wondering how to ignore a parent style and use the default style (none). I'll show my specific case as an example but I'm pretty sure this is a general question.

<style>
#elementId select {
    height:1em;
}
</style>

<div id="elementId">
    <select name="funTimes" style="" size="5">
        <option value="test1">fish</option>
        <option value="test2">eat</option>
        <option value="test3">cows</option>
    </select>
</div>

Ways I do not want to solve this problem:

• I cannot edit the stylesheet where the "#elementId select" is set, my module won't have access that.
• Preferably not override the height style using the style attribute.

For example using firebug i can turn off the parent style and all is well, this is the effect I am going for.

Once a style is set, can it be disabled or must it be overridden?

Solution 1:

You could turn it off by overriding it like this:

height:auto !important;

Solution 2:

It must be overridden. You could use:

<!-- Add a class name to override -->
<select name="funTimes" class="funTimes" size="5">

#elementId select.funTimes {
   /* Override styles here */
}

Make sure you use !important flag in css style e.g. margin-top: 0px !important What does !important mean in CSS?

You could use an attribute selector, but since that isn't supported by legacy browsers (read IE6 etc), it's better to add a class name

Solution 3:

This got bumped to the top because of an edit ... The answers have gotten a bit stale, and not as useful today as another solution has been added to the standard.

There is now an "all" shorthand property.

#elementId select.funTimes {
   all: initial;
}

This sets all css properties to their initial value ... note some of the initial values are inherit; Resulting in some formatting still taking place on the element.

Because of that pause required when reading the code or reviewing it in the future, don't use it unless you most as the review process is a point where errors/bugs can be made! when editing the page. But clearly if there are a large number of properties that need to be reset, then "all" is the way to go.

Standard is online here: https://drafts.csswg.org/css-cascade/#all-shorthand

Solution 4:

you can create another definition lower in your CSS stylesheet that basically reverses the initial rule. you could also append "!important" to said rule to make sure it sticks.