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
In my current project, a reactJS application utilizing ant design for the UI was recently deployed to production on locked down computers. These computers lack internet access, causing ant design icons on modals to appear as empty boxes. Upon investigation ...
Has anyone been successful in changing the color of mat-divider? I attempted the following but had no luck: component.html <mat-divider class="material-devider"></mat-divider> component.scss .material-devider { color: red } ...
code: http://jsfiddle.net/HB8h9/7/ <div id="tab-2" class="tab-content"> <label for="tfq" title="Enter a true or false question"> Add a Multiple Choice Question </label> <br /> <textarea name ...
I am currently facing an issue with my code, where there is a border at the bottom of every row. Click here to view the code Unfortunately, I have noticed that the border at the bottom of each row does not extend across the full width. This occurs even wh ...
At the moment, I have been utilizing this complete set of calendar codes. <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <link href='fullcalendar.css' rel='stylesheet' /> <link href=&a ...
After selecting a category, I attempted to change the color using "ng-style" in my HTML code. However, it seems that the color change is not taking effect. This is the snippet from my HTML code: <div ng-repeat="item in ListExpense" ng-class-odd="&apos ...
I'm in need of some CSS expertise to assist with this layout. Here is the current structure: <div class="movieList"> <div class="image" selected = true> <img class="poster" src="image1" selected = true/> </div> <d ...
After trying out various color pickers, I was not satisfied with their performance until I stumbled upon Spectrum - The No Hassle jQuery Colorpicker. It perfectly met my requirements. <html> <head> <meta http-equiv="content-type" content="t ...
Can we adjust the border color opacity in React when using a theme color that is imported? For example, if our CSS includes: borderBottomColor: theme.palette.primary.main and we are importing the theme with Material UI using makeStyles, is there a way to ...
I've been dedicating a significant amount of time to finding a solution, but haven't had any luck. I'm aiming to create a visual effect where 10 words with varying font sizes slide in from different directions on a canvas within my document ...
I am trying to populate an HTML table with the JSON string data I receive. The object data seems correct, but for some reason, it is not getting appended to the table. Can you help me identify what's wrong with my jQuery append statement? functio ...
Does anyone have suggestions on how to resize the middle red container when the window is resized, considering the fixed-width black containers on the left and right? I am aware that this can be achieved using jQuery by calculating the window width and a ...
Today, I experimented with using relative values in jQuery's .css() function. $block.css({'margin-left': '-=100%'}); This resulted in the following style for the div: <div class="block" style="margin-left: -100px;"> I not ...
I'm facing some challenges trying to create this specific layout, particularly with setting a background that should cover 50% of the screen size. My initial thought was to use an image as the background, but I need different colors for each page. ht ...
I have a JSON dataset structured as follows: $scope.jsondata = [{filename:"/home/username/textfiles/0101907.txt"},{filename:"/home/username/textfiles/0124757.txt"},{filename:"/home/username/textfiles/0747332.txt"} ... ]; Here is my HTML code: <li ng ...
Currently, I am working on automating the process of downloading files. To locate these files, I need to interact with two dropdown menus: one named 'Select Period' where I choose a date, and the other named 'Select File Type' where I s ...
I'm struggling to incorporate a MaterialUI Tooltip into my React application with two separate text lines. The first line should serve as the main title, while the second line functions as a sublabel. In this screenshot provided, you can see where I ...
My dilemma is unique: while many struggle with vertically aligning elements, I face the opposite issue. The contents of my button are currently vertically aligned, but I want them to wrap around like a normal <div> while retaining its clickable funct ...
I am encountering an issue with retrieving data in a div element. It seems that the function provided does not work correctly for files larger than a single line of code or even possibly a string. What can be done to resolve this? <ul class="dropdo ...
Working on a CodeIgniter project, I am faced with the task of adding information to a form within my view page called meal_add.php. Below is the form structure: <div id="content" class="box"> <form action="<?php echo base_url(); ?>index ...