I'm curious if you have any ideas on how to customize the appearance of a disabled checkbox?
For example:
<input type="checkbox" value="All Terrain Vehicle"
name="exfilter_All Terrain Vehicle"
id="exfilter_All_Terrain_Vehicle"
class="exfilter" disabled="">
Utilize the attribute selector within your CSS
input[disabled]{
outline:1px solid red; // or any specific style
}
If you want to target checkboxes specifically, use:
input[type=checkbox][disabled]{
outline:1px solid red; // or any preferred style
}
$('button').click(function() {
const i = $('input');
if (i.is('[disabled]'))
i.attr('disabled', false)
else
i.attr('disabled', true);
})input[type=checkbox][disabled] {
outline: 2px solid red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="example" disabled />
<input type="text" value="text" disabled />
<button>disable/enable</button>Styling a disabled checkbox directly is not possible as it is controlled by the browser / OS.
However, there is a clever workaround where you can replace the checkbox with a label that mimics a checkbox using pure CSS. By utilizing an adjacent label, you can create a new "pseudo checkbox" and have complete control over its appearance in any state.
An example demonstrating this technique can be found here: http://jsfiddle.net/JohnSReid/pr9Lx5th/3/
Below is the sample code:
input[type="checkbox"] {
display: none;
}
label:before {
background: linear-gradient(to bottom, #fff 0px, #e6e6e6 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #035f8f;
height: 36px;
width: 36px;
display: block;
cursor: pointer;
}
input[type="checkbox"] + label:before {
content: '';
background: linear-gradient(to bottom, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-color: #3d9000;
color: #96be0a;
font-size: 38px;
line-height: 35px;
text-align: center;
}
input[type="checkbox"]:disabled + label:before {
border-color: #eee;
color: #ccc;
background: linear-gradient(to top, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
input[type="checkbox"]:checked + label:before {
content: '✓';
}<div><input id="cb1" type="checkbox" disabled checked /><label for="cb1"></label></div>
<div><input id="cb2" type="checkbox" disabled /><label for="cb2"></label></div>
<div><input id="cb3" type="checkbox" checked /><label for="cb3"></label></div>
<div><input id="cb4" type="checkbox" /><label for="cb4"></label></div>Depending on browser compatibility and accessibility requirements, additional adjustments may be necessary.
Implement the :disabled CSS3 pseudo-selector
To style it using CSS, you can use the following code:
input[disabled] { /* your CSS styles here */ }
Checkboxes (including radio buttons and <select> elements) are native OS components, not controlled by the browser. It can be challenging to style them consistently across different browsers and operating systems.
One workaround is to use an overlay on top of the checkboxes and style that instead for more control.
To achieve this effect, you can utilize CSS's :disabled selector for CSS3:
checkbox-design { }
checkbox-design:disabled { }
If necessary, you may also consider using JavaScript to dynamically change the style when enabling or disabling it (depending on your specific requirements).
Avoid adding the disabled attribute to the input field and implement the specified styles:
input[type="checkbox"] {
pointer-events: none;
}input[type='checkbox'][disabled][checked] {
width:50px; height:50px;
}
input[type='checkbox'][disabled][checked]:after {
content:'\e019'; position:absolute;
margin-top:-20px;
opacity: 0.8 !important;
margin-left:-10px;
font-family: 'Material Icons';
font-style: normal;
font-weight: bold;
}
If you want to prevent someone from changing the checkbox status and make it look disabled, simply utilize JQuery.
$('input[type=checkbox]').click(false);
You can then customize the appearance of the checkbox as needed.
It is also compatible with Internet Explorer:
Markup language
class="inactive"
Cascading Style Sheets
.inactive{
...
}
If you're looking to inject some vibrant hues into your checkboxes, give this clever solution a go.
input[type=checkbox][disabled] {
border: 2px solid blue;
border-radius: 10px;
}
As a novice in ReactJS, I am currently utilizing materia-ui to design a page. I am looking to make a custom change on a TextField where the font size adjusts when text is entered. However, adjusting the font size creates too much space between the label a ...
Currently, I am in the process of automating an Application that includes several embedded iframes. I am wondering if there is a method to view my HTML source code within these frames. ...
My goal is to create a doughnut chart, but my search for reliable CSS/SVG/Canvas solutions has not been successful. https://i.sstatic.net/Rq6Lx.jpg I want each segment to have fully rounded corners, which presents a unique challenge. ...
Every time I try to compile SASS into CSS, I encounter the same error message: I keep getting an error that says I need to specify an output directory when compiling a directory. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! <a href="/cdn-cgi/l/e ...
<div id="content"> </div> #content{ height:100%; z-index:2; position:relative; top:40px } The content within this DIV is positioned 40px from the top of the page and will scroll under a navigation bar that is 40px high. I am trying to figur ...
Hi, I've been using the Google PageSpeed Module and have created a .htaccess file to optimize my website (www.anetoi.com). I tried using combine_css to merge my CSS files but it didn't work as expected. I followed Google's instructions but s ...
I'm completely new at this. I am attempting to create a contact form using HTML5 and PHP mail function, but I am facing an issue with my form action pointing to contacto.php. After submitting the form, it seems to be skipping over the IF condition wi ...
I'm currently using the font Gilroy-Bold for my project, but I'm facing inconsistencies between how it appears in Figma and my React application, even though they are both sourced from the same place. Figma: https://i.stack.imgur.com/3QvY4.png ...
When using a template engine like Velocity or FreeMaker, you have the ability to break up your HTML into reusable components. For example, if you have an ad <div> that appears on multiple pages of your site, you can create a file containing that < ...
Is there a CSS-only method to achieve a beveled text effect? Just to clarify, I'm seeking a way to make text appear thick with a beveled style rather than using something like text-shadow which simply extends the font edges as shown here. ...
Can anyone offer advice on speeding up the display of large tables with 500+ rows in Internet Explorer? Here is my current approach: The MySQL query result includes 500+ rows, which I then loop through using a while loop to display: echo "<tr class=& ...
I am facing an issue with a sticky sidebar that has a fixed height of calc(100vh-90px) and the main content. The sidebar contains dynamic content, which may exceed its defined height, resulting in a scrollbar. On the other hand, the main content is lengthy ...
My username-password form is styled and working perfectly, but there's an issue that arises when I log in multiple times. Chrome automatically fills in my email, turning the username textbox yellow. It doesn't seem to happen with Firefox or Safar ...
Struggling to get this code working properly. If the window width is greater than 800, I want 6 images with a red background. If the window width is less than 800, I want 4 images with a blue background. I need this functionality to work both on r ...
I am attempting to conceal some columns in my HTML code by using MDN colgroup and col elements, and manipulating the styles of the columns. The <td> containing the text 'visible' is visible in all browsers (which is good), but the one with ...
When dealing with table cell elements that have borders, it's common for them to not respect the vertical height of the cell containing them. Sometimes a child element's borders may overlap the padding or border of its containing cell. To prevent ...
The code snippet can be found here I am a beginner in this field and currently studying a piece of code. I am having trouble understanding the logForm.$invalid.$setValidity line. I have searched online but couldn't find any information about it. The ...
Attempting to automate the process of logging into my etoro account and extracting data from my portfolio using Selenium. Currently working on Google Colab, here is what I have so far: from selenium import webdriver options = webdriver.ChromeOptions() opt ...
**I have everything displaying perfectly, but I am wondering how to highlight the active tab without using any third-party components. Any assistance would be greatly appreciated. Thank you.** <ul class="tabs"> <li [ngClass]=" {'active-tab ...
I found a helpful article on creating collapsible menus and submenus using only Bootstrap and custom code for Angular 2, 4, 5, 6. I've been able to implement the logic successfully, but I'm facing an issue with multiple menus where clicking on an ...