In my win8 app have 2 pages. Page1.html and page2.html . Page1 has reference to ui-light.css and then page1.css. Page2 has reference to ui-light.css and page2.css.
ui-light.css has a rule defined for disabled state of select boxes. on page1.css I have overridden the select disabled style in this way.
select:disabled{
background-clip: padding-box
background-color: rgb(45, 44, 44)
border-bottom-color: rgba(128, 128, 128,1)
border-left-color: rgba(128, 128, 128,1)
border-right-color: rgba(128, 128, 128,1)
border-top-color: rgba(128, 128, 128,1)
color: rgba(128, 128, 128,1)
}
This works fine. But when I navigate from page1 to page2, all the select boxes in page2 have the same style(style in page1.css). How do I make sure this does not happen? I want the select boxes in page2.css to continue to use the style in ui-light.css.
I tried defining the style based on id, using !important. Nothing seems to work.
Any ideas?