CSS:
button:active {
/* active css */
}
button:disabled {
opacity: 0.5;
}
HTML:
<button disabled="disabled">Ok</button>
After clicking the button, the browser applies the button:active state to give the appearance of a click, despite the button being disabled. It was unexpected as I believed :active only applied to enabled buttons. What am I overlooking?
Based on my observation, it seems that the :active pseudo-class does not automatically exclude :disabled elements. For more information, you can refer to the specification.
To address this issue, one approach is to specifically target only :enabled elements with your :active selector in order to exclude :disabled elements:
button:enabled:active {
/* styles for active state */
}
button:disabled {
opacity: 0.5;
}
See a demonstration here: http://jsfiddle.net/Blender/LRvra/1/
In accordance with the CSS3 guidelines (the :disabled feature is not included in CSS2.1), there is no explicit statement that the pseudo-classes :active and :disabled cannot be used together. It's possible that this aspect of the guidelines requires further clarification so user agents have the flexibility to apply both pseudo-classes in combination.
I recommend adjusting your selectors to provide clearer instructions:
button:enabled:active {
/* styles for active state */
}
button:disabled {
opacity: 0.5;
}
Another option is to utilize the :not()-selector in CSS:
button:active:not(:disabled) {
/* styles for when button is active but not disabled */
}
button:disabled {
opacity: 0.5;
}
Best wishes to everyone, Patric
Is there a way to simplify this lengthy HTML code used for browser alerts? Here is an example: <div class="ie-message" style="display: block; "> <div class="alert error"> <h2> Sorry, your web-browser is outdated ...
With @media screen and (max-width:700px) { Link to image 1 Whenever I use @media screen and (min-width: 700px) { it messes up. How can I adjust it for min-width without causing issues? Link to image 2 ...
I am looking to enhance the appearance of text on an HTML page by making it bold. I have implemented the following code: <script type="text/javascript" > function getSelectedText(){ if(window.getSelection){ ; return window.getSelect ...
I am facing a problem with my HTML5 range slider. After setting a value (status) and sending it to the database, when I reload the page the slider's value is always set to '50'. The slider is being generated within an ng-repeat from AngularJ ...
Is there a way to stop coloring elements after 'tue 7-1-1' using CSS? I am only allowed to manipulate the first child of every element up until a certain point through CSS, without modifying the existing code. Note: Span elements are nested wit ...
I own the website Onthecomeupartists.com and am currently using the Impreza Theme 2.10 on WordPress 4.5.2. However, I want to enhance the mobile compatibility of my site by removing the sidebar on blog posts when viewed on mobile devices only, while keepin ...
I am currently using Material-UI version 4 and have not upgraded to the latest mui v5. I have experimented with various solutions, but so far none have been successful. My goal is simply to eliminate or hide the border around the textfield component. < ...
Storing images in a folder named images is recommended for better website organization and SEO benefits. But what about local video content? Should it go in a folder labeled videos? ...
Hi there! I'm looking to modify a list filtering function by targeting multiple ul tags within the same div instead of just filtering li elements. Any ideas on how this can be achieved? Below is my JavaScript code: $( document ).ready(function() { ...
Currently, I am utilizing event.data to capture the text inputted into this particular HTML textbox. My intention is to change the background color to red based on that input. However, when using the style attribute on event.data, I encounter an error. It& ...
.dd{ height:100px; width:100%; border:1px soild red; background:#000; } .dd .d1{ height:20px; width:20px; border:1px solid green; display:inline-block; } .dd .d2{ height:20px; width:20px; border:1px solid green; display:inl ...
I am looking to develop an Input Box where users can enter the private details of a person. The first character must be either A or E, and the rest can be alphanumeric with no special characters allowed. I need to implement validation on the client side to ...
When developing an app module using the MEAN stack with MVC, I created a folder named AppModules. Inside AppModules, there is a folder called search, which contains three subfolders: models, views, and controllers. I've written an HTML file in the vie ...
I am looking to incorporate microdata into my website, which currently does not use HTML5 but instead uses <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Although I have plans to switch ...
I run a unique type of platform that allows users to publish their own blog posts using a WYSIWYG editor, and then share them on the site. My top priority is to ensure security against XSS attacks, which is why I am looking for alternatives to using v-htm ...
I'm having trouble getting these photos to display in the same row. Any suggestions on what I should change? https://i.stack.imgur.com/EbvmR.png I've attempted using float left and other commands, but one picture continues to stay in the lower r ...
I'm in the process of creating a website and I want to be able to change background images with ease when clicked, like using fade in or fade out effects. The onclick functionality is already implemented with jQuery, but I'm having trouble incor ...
When faced with the limitation in Firefox where links cannot be opened in a new tab if they have a HREF tag diverting to a function, it might be necessary to utilize a script to convert them to an actual HREF. Understanding the functionality of foo: func ...
I currently have a table with some contenteditable divs: <div contenteditable="true" class="change"> This particular JavaScript code is responsible for changing the color of these divs based on their content when the page loads. However, I am now ...
As a beginner in programming, I wanted to delve into the world of cellular automata and decided to create my own using JavaScript. The project involves a simple binary (black and white) 2D CA where each cell updates its color based on the colors of its 8 ...