The browser uses some pre-defined default values to most of the CSS properties. These default values may vary depending on the browser and also the version of the browser being used. These default values are given in order to ensure uniformity throughout web pages. But in some cases these defaults result in an unexpected action to be performed by the web page, hence removing these defaults is a viable method.
In most cases, the reset can be done using some pre-defined reset methods. There are many other reset methods. But the problem with those reset methods is that, they are used to remove all the styling present in a web page (remove all the browser defaults for all elements and their properties), but if we want to remove the default only or some specific style for one element then the value unset comes in handy.
Problem Statement: Most of the cases the default buttons provided by web browsers are very bland and not stylized. To make it more stylized and to make it fit into the theme of the web page it could be stylized manually using CSS. But manual styles cannot be applied until the default styles are removed. Hence we apply the following code to remove the default styles present on a button.
Example 1: Here you will see how to use unset property by HTML and CSS. This example remove only the default browser style.
Example 2: Here you will see how to trigger unset property by HTML, CSS an jQuery.
- Before clicking the button:
- After clicking the Button:
- How to get all CSS styles associated with an element using jQuery ?
- HTML | Color Styles and HSL
- How to append Angular styles in footer ?
- How to use SASS to create new set of color styles in Bootstrap 4 ?
- CSS | element,element Selector
- CSS | element element Selector
- CSS | element~element Selector
- CSS | element+element Selector
- CSS | element > element Selector
- How to override the CSS properties of a class using another CSS class ?
- Difference between bootstrap.css and bootstrap-theme.css
- How to hide an element when printing a web page using CSS?
- CSS | element Selector
- How to add a box-shadow on one side of an element using CSS?
- How to add space (" ") after an element using :after selector in CSS ?
- How to select all children of an element except the last child using CSS?
- CSS to put icon inside an input element in a form
- How to insert line break before an element using CSS?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.