Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Reset HTML input style for checkboxes to default in IE
Resetting HTML input styles for checkboxes to their default native appearance can be challenging in Internet Explorer. Some browsers don't allow complete style resets for form elements.
The Problem
When you apply global CSS styles to inputs, checkboxes may inherit unwanted styling that you cannot easily reset to their original native appearance.
Method 1: Target Specific Input Types
Style only the input types you want to modify, excluding checkboxes:
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"] {
border: 2px solid green;
padding: 5px;
}
Method 2: Using CSS3 :not() Pseudo-class
Exclude checkboxes and radio buttons from styling using the :not() selector:
input:not([type="checkbox"]):not([type="radio"]) {
border: 2px solid green;
padding: 5px;
}
Note: This method may have limited support in older versions of Internet Explorer (IE 8 and below).
Method 3: Reset Checkbox Styles Explicitly
For checkboxes that have inherited unwanted styles, try to reset them explicitly:
input[type="checkbox"] {
appearance: auto;
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
border: none;
padding: 0;
margin: 0;
}
Browser Compatibility
| Method | IE 8-10 | IE 11+ | Modern Browsers |
|---|---|---|---|
| Specific type selectors | Full support | Full support | Full support |
| :not() pseudo-class | No support | Partial support | Full support |
| appearance property | No support | Limited support | Good support |
Complete Example
<!DOCTYPE html>
<html>
<head>
<style>
/* Style text inputs only */
input[type="text"], input[type="password"] {
border: 2px solid green;
padding: 5px;
}
/* Keep checkboxes in their native style */
input[type="checkbox"] {
appearance: auto;
-webkit-appearance: checkbox;
}
</style>
</head>
<body>
<input type="text" value="Styled text input"><br><br>
<input type="checkbox"> Native checkbox<br><br>
<input type="password" placeholder="Styled password">
</body>
</html>
Conclusion
The most reliable approach is to target specific input types rather than trying to reset checkbox styles. Use the :not() pseudo-class for modern browsers, but provide fallbacks for Internet Explorer compatibility.
336 Views
