css: how to override max-width value with a larger (less restrictive) value

I have a css file with this style:

.filefield-element .widget-edit {m开发者_JAVA技巧ax-width: 70%;}

I wanted to increase the max-width without modifying that css file, so I created a custom css file with this style:

.filefield-element .widget-edit {max-width: 99%;}

In the "html/styles" pane, I see that the styles are listed in the correct order:

.filefield-element .widget-edit {
    max-width: 99%;
}

.filefield-element .widget-edit {
    float: left;
    max-width: 70%;
}

However, "max-width: 99%" is not overriding "max-width: 70%". It seems that the more restrictive value (70%) is used, even when the less-restrictive value (99%) comes first.

Is there a way to override a max-width value with a larger (less restrictive) value?

You can override (unset) max-width with

.foo{ max-width:none; }

... to clear any inherited max-width.

Try using !important, or selector with higher specificity.

Example:

  max-width: none !important;

This is a specificity issue. Take a look at http://htmldog.com/guides/cssadvanced/specificity/.

Basically, you need to make one more specific than the other. Put the containing element before .filefield-element .widget-edit and it will be overridden

Use JavaScript to set max-width to none first, then reassign a new value.