Unable to reset disabled styling for CSS select box

My Windows 8 app consists of two pages: Page1.html and Page2.html. Page1 references ui-light.css and page1.css, while Page2 references ui-light.css and page2.css.

In the ui-light.css file, there is a rule defined for the disabled state of select boxes. I have overridden this select box style in page1.css as follows:


    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) 
    }

While this works correctly on Page1, when navigating to Page2, all select boxes inherit the same style from page1.css. How can I prevent this from happening so that select boxes in page2 continue to use the ui-light.css style?

I've attempted defining the style based on id using !important, but nothing has resolved the issue. Any suggestions?

cssselectwindows-8modern-ui

Answer №1

Include CSS only on certain pages without referencing the specific stylesheet page1.css in the header of page2.html

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery to temporarily disable a div element

I need to implement a timer in a div that will disable it for a specific duration, such as 3 seconds. Here is the HTML code snippet: <div class="answ-container" align="center"> <div class="c_answer" id="1316" name="1" data-rcat-no="1"> ...

jquerycsshtml

Expanding DIV to cover entire width of screen

Allow me to explain my current predicament: In the following code snippet, I have a simple div element. However, upon running the code, I am presented with a gray box that does not span across the entire browser window as I had intended. Instead, it appea ...

csswidthhtml

Can flexbox elements be animated as they scroll?

Wondering if it's feasible to animate flex elements upwards when scrolled? Attempting to replicate this effect: https://codepen.io/Sergiop79/pen/bxjGEe I want to apply this to the elements below (styled in flexbox), either the entire "row" or each i ...

javascriptcssflexboxcss-transitions

Steps for designing a single-column content-focused layout

Creating a single column fixed-width layout with a header and footer, the order of view should be as follows: header navigation dynamic content 1 dynamic content 2 main content footer The dynamic contents (3, 4, 5) will expand vertically with unknown he ...

htmlcss

What is the best way to increase the spacing between buttons in a Bootstrap navigation bar?

Can anyone guide me on how to add space between each button in this Navigation Bar? I want them to be separated, similar to this example. I am using bootstrap 5. <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm bg-body"&g ...

htmlcssbootstrap-5

What is the best way to ensure consistent code placement at the bottom of my Django Template using inheritance?

Lately, I've been working on incorporating a footer into my layout.html file that is inherited by all other pages within my Django project. I am aiming to create a footer that remains fixed at the bottom of every webpage just like how Stack Overflow ...

htmlcssdjango

Issue with jQuery DataTables column.width setting failing to meet expectations

Currently, I am utilizing datatables for my project. According to the datatables documentation found here, it suggests using the columns.width option to manage column width. However, when I implement columns.width and render the table, it seems to disreg ...

jqueryhtmlcssdatatables

Display all elements that come before and after the current element

For debugging purposes, I need to output the IDs of all previous images in a check. The issue arises when trying to assign classes to all previous elements using the script below, as the images are not being added to the correct classes. $(document).on(&a ...

jqueryhtmlcss

Unable to eliminate the default styling of Material UI table using an external CSS file

Currently, I am incorporating a Material Ui table into my project. My goal is to eliminate the border and adjust the padding of the table. Upon investigation, I came across a default className for material ui table known as MuiTableCell-root-40. Below is t ...

javascripthtmlcssreactjsmaterial-ui

Bootstrap allows for multiple items to be displayed on the same line, creating

I am currently utilizing Bootstrap framework and have a total of four items. However, the last item is displaying beneath the other three items instead of being on the same line. The current code snippet is as follows: <div class="text-center linksblok ...

csstwitter-bootstrap

Customize Link Appearance Depending on Current Section

Looking for a way to dynamically change the color of navigation links based on which section of the page a user is currently viewing? Here's an example setup: <div id="topNav"> <ul> <li><a href="#contact">Contac ...

javascriptjqueryhtmlcssviewport

Aligning images of varying sizes

I have implemented a PHP script that automatically resizes images proportionally to fit within a given height and width. For example, if the original picture is 200x100px and the target box is 180x180px, the resized image will be 180x90px. Although this s ...

csshtmlimagecentering

Revealing CSS elements moving from the left to the right

On my website, I have implemented two different menu bars. The first one, in black, stays fixed at the top of the page. The second one, in orange, becomes sticky once it reaches the black bar. At the same time, a small logo image is revealed, previously hi ...

jqueryhtmlcss

Only display one div element when in print mode, hiding all others

My print style CSS code includes the following: * { display:none; } #printableArea { display:block; } Initially, I anticipated that this CSS would hide all elements except for the printableArea. Surprisingly, everything on the page became hidden when ...

css

I am having difficulty combining 2 HTML pages without the output becoming distorted

Having encountered issues when combining two HTML pages, one for a navbar and the other for a contact form in my Django project. The resultant single page appears distorted as shown in the image below. I attempted to use sections but it does not seem to re ...

htmlcssdjango

Automatic padding within Bootstrap5

I'm struggling to understand why I am experiencing a consistent padding at the bottom of my container in Bootstrap5. I attempted to use align-items-center within the row to center the content, but it had no effect. <!DOCTYPE html> <html la ...

cssbootstrap-5

Unable to get font-face to function properly on IE versions 7 and 8

I'm having trouble getting the font-face to work properly on both IE7 and IE8. This is the code snippet I have used: @font-face { font-family: 'DroidSans'; src: url('fonts/DroidSans.eot'); src: url('fonts/DroidSa ...

cssinternet-explorer-8cross-browserinternet-explorer-7

Creating divs that adapt to different screen sizes without relying on flexbox

Currently, I am in the process of developing a chat interface where the viewport height is set to 100vh. The layout consists of a header/navbar, a "main content" section, and a footer housing the input field (you can view the code here) The way I have str ...

javascriptjqueryhtmlcssresponsive-design

Is it possible to seamlessly incorporate a square image into a bootstrap background image slider without having to crop the image?

I've exhausted all the different solutions I've come across on other platforms to resolve this issue, but I'm still unable to find a fix. So here's what I'm struggling with: The problem I'm facing involves finding the correct ...

htmlcsstwitter-bootstrap

What is the reason behind Material UI's decision to utilize display flex instead of display grid?

The Grid component implements the grid system. It leverages the Flexbox module in CSS to provide great flexibility. What is the reason behind material UI using display flex instead of display grid? ...

cssmaterial-ui