What is the correct way to reset the styling of a web browser element, such as a <button>?

I have come across many sources advising me to reset HTML by manually resetting numerous individual properties, as demonstrated here: https://css-tricks.com/overriding-default-button-styles/

Another approach I discovered in CSS is simply using: button: {all: unset;}

Could this be considered an anti-pattern? I am aware that a polyfill may be required, but it seems like most projects are already utilizing them.

EDIT: Feedback from comments indicated that my intention was too vague. My goal is to create a clear and structured markup. Initially, I had a <span> tag containing an icon that functioned as a button. It was rightly pointed out that this should be wrapped within <button> tags since it functions as a button. However, the default styles applied by the button tag, such as background and border, made the icon appear strange. This led me to question whether I should remove specific CSS properties or reset all of them.

javascripthtmlcss

Answer №1

Throughout my 20 years of experience, I've noticed that when it comes to CSS, anti-patterns can vary depending on the context.

Consider Using { all: unset; }

Imagine you're creating a new CSS library specifically for modern browsers. In this scenario, it would be essential to strip down the button element to its bare essentials to handle every possible use case. By doing so, we can assure users that our library will provide consistent rendering across different platforms. Failing to nail this on the first try could lead to frequent updates as users encounter unexpected behavior.

When to Avoid { all: unset; }

For those of us working on building components or e-commerce widgets, implementing such a rule might not be the most efficient approach. It could result in having to re-add styles that were removed by using { all: unset; }. In my earlier days as a developer, I often prioritized following conventions rather than considering the practicality of each situation. This sometimes led to wasting time that could have been better spent elsewhere.

Alternative Approaches

Some common issues to watch out for when styling button elements include:

  • Unwanted background-color
  • Outdated border styles (like outset or inset)
  • Losing inherited font-family
  • Button-like appearance on older mobile browsers

Here's a basic default styling for button:

.button-reset {
  background-color: transparent;
  border: none;
  font-family: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

Additional Tip: Consider adding cursor: pointer to your button styles for a more interactive user experience.

Answer №2

Using the unset property is a potent tool that is widely supported on the internet. It is recommended to utilize it unless you need to cater to Internet Explorer, as versions 6-10 and 11 do not support it. For more in-depth information, you can refer to this link: https://caniuse.com/#search=unset

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Layering numerous backgrounds (Regular, Expanded, Regular) atop one another

After experiencing an issue with the background image not fitting the content properly at different resolutions, I attempted to divide the background into three parts and automatically stretch the middle section to fill the space between the top and bottom ...

htmlcssbackground-image

Tips for inserting values into a string array using jQuery or Angular 7

I have a series of checkboxes with values obtained from a loop. Instead of pushing these values into an array, I need to join them together as "parent1", "parent2", "parent3" and display the result in the console. Below is the code snippet for reference: ...

jqueryhtmlangular

"Utilizing the splice method to insert an element at specified indexes within an

const list = [] const obj = { name: '', mobile: '' } _.forEach(errors, (value, key) => { // eslint-disable-next-line no-debugger // debugger const field = key. ...

javascriptvue.jsnuxt.js

Is the presence of the selenium webdriver being registered?

Is there a method to detect if a website can tell I am using a bot while running Selenium WebDriver in Python or Puppeteer in JavaScript? Are there any resources that indicate whether a bot test would be failed, such as Cloudflare or Captcha? Appreciate a ...

javascriptpythonseleniumselenium-webdriverwebdriver

Vertically align the text

Is there a way to center this text vertically within the divs? I've attempted adjusting the position using relative/absolute, and modifying the top and left properties of the paragraph, but none of these methods have been successful. div.roxo{ ...

htmlcssalignment

What is the method for adjusting the position of this box-shadow?

As a beginner in coding, I stumbled upon this box shadow effect online but I am struggling to adjust it to match the font style I am using. Here is the CSS for the title: .sidebar-title { position:absolute; z-index:150; top:100px; left:330px; ...

htmlcssbox-shadow

What are the steps to develop a progress bar using PHP and JavaScript?

In the application I'm developing, PHP and JavaScript are being used extensively. One of my tasks involves deleting entries from the database, which is a time-consuming process. To keep the end-user informed, I would like to provide updates on the pr ...

phpjavascriptajaxprogress-bar

Having difficulties showing selectors content in Cheerio

Seeking assistance with extracting a table from a website, specifically trying to retrieve all the columns first. When I make the request and load the html into cheerio, I am facing an issue where the selector content does not display anything on the conso ...

javascriptnode.jsweb-scrapingrequestcheerio

execute a rigorous compilation during the ng build angular process

I am currently working on a project using angular-cli and I have configured my package.json with the following scripts: "scripts": { "ng": "ng", "build": "ng build --base-href /test/", "prod": "ng build --prod --base-href /test/" } According to the ...

javascriptangulartypescriptnpmangular-cli

Tips for transferring input data to a static HTML page

After successfully identifying a value in a table using jQuery, I am faced with the challenge of passing it to a static HTML page. How can this transition be achieved smoothly? $('.gobutton').bind('click', function(){ var value = $( ...

jquerydjangohtml

What distinguishes loading angular dependencies and what method is optimal for module sharing?

Can you explain the distinction between these two methods of loading modules? angular.module('CoreApp', ['...','...','...','...']); //parent module angular.module('MainApp1', ['CoreApp' ...

javascriptangularjsmodulebowermultiple-domains

Guidelines for automating button click using selenium in Python

<div class="wrapper"> <button class="w-full h-14 pt-2 pb-1 px-3 bg-accent text-dark-1 rounded-full md:rounded select-none cursor-pointer md:hover:shadow-big focus:outline-none md:focus:bg-accent-2 md:focus:shadow-small "> ...

pythoncssseleniumautomationselenium-chromedriver

The magical form component in React using TypeScript with the powerful react-final-form

My goal is to develop a 3-step form using react-final-form with TypeScript in React.js. I found inspiration from codesandbox, but I am encountering an issue with the const static Page. I am struggling to convert it to TypeScript and honestly, I don't ...

javascriptreactjstypescriptreact-final-form

What could be causing the lack of functionality for my button click in my JavaScript and HTML setup?

Currently, I am attempting to implement a functionality where I have two buttons at the top of my page. One button displays "French" by default, and when I click on the "English" button, it should replace the text with "French" using show and hide methods. ...

javascripthtmlcssbuttonhtml-table

What is the best way to implement a delay before calling the owlCarousel function?

Is there a way to delay calling the owlCarousel function for 5 seconds? I attempted the following: $(document).ready(function(){ setInterval(function(){ $(".demo-slide").owlCarousel(); },5000); }); However, I encountered ...

javascriptjqueryowl-carousel

Ways to modify CSS using JavaScript

Can anyone assist me with a custom CSS code that I found? It looks like this: header.type-2:not(.fixed-header) nav>ul>li>a{ color:#000; } I've been trying to change the color to #fff using JavaScript, but haven't had any success yet. ...

javascripthtmlcss

Stable height with Internet Explorer 6

According to information found on davidwalsh, it is mentioned that in IE6, the container will continue to expand vertically even when a specific height is set. How can I establish a max-height in IE6 so that the container expands with its content until r ...

htmlcssinternet-explorer-6scrollbar

Hide/Show overflow causing a disruption in my perspective

I am puzzled as to why my paragraph is not starting on a new line despite the overflow property set on the previous element. Take a look at my plunker, adjust the overflow property in line 11 to hidden and it will display correctly. When set to visible, i ...

htmlcss

In node.js, what is the syntax for invoking a function within a struct from that same function?

Here is a brief overview of my code: exports.entity = { name: "Foo", //Etc... start: function () { this.attack(); }, attack: function () { setTimeout(attack, 1000); //Doesn't work ...

javascriptnode.js

Looking for a way to ensure a div reaches 100% height within a specified area without exceeding the boundaries of the body?

I am working with jQuery mobile and have specific requirements for my project: The main content will be a large graphic that needs to fill the entire page, with both horizontal and vertical scrolling if necessary. The header should remain fixed at the to ...

jquerycsshtmljquery-mobile