Why do default buttons change color when borders are removed?

Why do default buttons change color when borders are removed?

remove button style css
css remove button border on click
remove blue border on click
css reset button style
remove button style bootstrap
reset button color
css outline
remove styling from submit button

As you can see from running the snippet below, the background color becomes darker when borders are removed. I guess it has something to do with background-color: buttonface; in the browser's default stylesheet, but am unable to understand the short description of it on w3.

Browser: Chrome 78 on Ubuntu 18.

.noBorder {
  border: none;
}
<button type="button" class="noBorder">No border</button>
<button>With border</button>

I don't think you will find an explanation of this behavior in the classic CSS world because buttons are special elements. You may need to dig into how each browser implements the button element to understand what is happening.

I don't have any official proof but to use easy words: buttons have default style applied by the browser (related to border and background) and if you try to alter any value you will break everything.

Examples:

<button style="background-color:grey">button</button>
<button style="border-color:grey">button</button>
<button style="border-width:3px">button</button>
<button style="border-radius:5px">button</button>
<button style="border-image:none">button</button>
<button style="border-image-slice:1">button</button>
<button style="background-origin:content-box">button</button>
<button style="background-clip:content-box">button</button>
<button>button</button>

 

Overriding Default Button Styles, Andy Bell explains why a real button is better: video above how setting border: 0; removed the border in Chrome, but also the background? When you get "white space" in a cell ("grey lines" are missing), it's because that cell is filled with the white color. All you need to do is select that cell (you may have to select the cells around it as well). At the top (the ribbon), make sure that the Home tab is selected and click on Fill Color drop down arrow and select No Fill.


In Chrome, the user agent stylesheet styles <button>s as:

button {
    -webkit-appearance: button;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: buttontext;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    background-color: buttonface;
    box-sizing: border-box;
    margin: 0em;
    font: 400 13.3333px Arial;
    padding: 1px 6px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-image: initial;
}

And border: none is a shorthand, which translates to:

{
  border-top-color: initial;
  border-top-style: none;
  border-top-width: initial;
  border-right-color: initial;
  border-right-style: none;
  border-right-width: initial;
  border-bottom-color: initial;
  border-bottom-style: none;
  border-bottom-width: initial;
  border-left-color: initial;
  border-left-style: none;
  border-left-width: initial;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
}

The properties you are probably interested in are border-width, border-color and border-style (the apparently thin darker border comes from border-style: outset;).

It is, indeed, quite strange how a border-style: outset; border-width: 2px button renders, when compared to one having a width of 1px or 3px:

.\31 { border-width: 1px }
.\33 { border-width: 3px }
<button class="1">border-width: 1px;</button>
<button class="2">border-width: 2px;</button>
<button class="3">border-width: 3px;</button>

Having a Little Fun With Custom Focus Styles, This button shows a focus state with Chrome's default outline style. You can start by removing the default browser outline by selecting the focused In the example below, both background and border color change; you may� I only point this out to say, I get it, buttons are truly weird things in browsers. Factor in a dozen other browsers, mobile, and the idea that we want to style all those different elements to look exactly the same (see the opening of the article), and I have a modicum of empathy for people wanting to avoid this.


It depends on how the browser handles buttons related

The following was limited to the Chrome Browser:

When you try to use all:initial to applies the initial (or default) value of a property to an element. You would at the very minimum need the following style to have the default button:

-webkit-appearance: button;
border-width: 2px;
border-style: outset;
border-color: buttonface;
background-color: buttonface;

Breaking down the button style:

.noBorder {
  border: none;
}

.all-init {
  all: initial;
}

.leftover {
  color: buttontext;
  border-image: initial;
  font: 400 13.3333px Arial;
  padding: 1px 6px;
}

.p1 {
  /*property #1 required*/
  -webkit-appearance: button;
}

.p2 {
  /*property #2 required*/
  border-width: 2px;
}

.p3 {
  /*property #3 required*/
  border-style: outset;
}

.p4 {
  /*property #4 required*/
  border-color: buttonface;
}

.p5 {
  /* property #5 required*/
  background-color: buttonface;
}

.whole {
  -webkit-appearance: button;
  color: buttontext;
  background-color: buttonface;
  font: 400 13.3333px Arial;
  padding: 1px 6px;
  border-width: 2px;
  border-style: outset;
  border-color: buttonface;
  border-image: initial;
}
<button type="button" class="noBorder">No border</button> <br/>
<button class="all-init">test0</button>
<button class="all-init p1">test1</button>
<button class="all-init p1 p2">test2</button>
<button class="all-init p1 p2 p3">test3</button>
<button class="all-init p1 p2 p3 p4">test4</button>
<button class="all-init p1 p2 p3 leftover">test5a</button>
<button class="all-init p1 p2 p4 leftover">test5b</button>
<button class="all-init p1 p3 p4 leftover">test5c</button>
<button class="all-init p2 p3 p4 leftover">test5d</button>
<button class="all-init p1 p2 p3 p4 leftover">test6</button><br/>
<button class="all-init p1 p2 p3 p4 p5">test7</button>
<!-- test7 is the very minimum style required -->
<button class="all-init p1 p2 p3 p4 leftover">test8a</button>
<button class="all-init p1 p2 p3 p5 leftover">test8b</button>
<button class="all-init p1 p2 p4 p5 leftover">test8c</button>
<button class="all-init p1 p3 p4 p5 leftover">test8d</button>
<button class="all-init p2 p3 p4 p5 leftover">test8e</button>
<button class="all-init p1 p2 p3 p4 p5 leftover">test8f</button>
<button class="all-init whole">test9</button>
<br/><button>With border</button>

Solved: Remove background colour/border of button, What you are seeing is the default border and padding on the <button>. You can clear that by using the Bootstrap utilities classes for padding and� Click the line style and color that you want, and then click one or more buttons to indicate the border placement. Note: You also can use next shortcut keys: Alt+P Apply or remove the top border. Alt+B Apply or remove the bottom border. Alt+L Apply or remove the left border. Alt+R Apply or remove the right border.


Select options black border after chrome upgrade, But still can't remove the black border that appears around the select drop M83, we have launched a visual refresh for form controls and focus. This effort improves consistency, brings increased color contrast, and enhances touch support. You can learn more about this effort in our Chromium blog post. The accent color set for the Windows in the background will not reflect on the Edge browser. Edge browser comes with two default color settings, Dark and Light. To change the browser color, follow the steps below: Open Edge browser and click on the More actions icon i.e.“…” located on the top right corner of the window.


How To Create Outline Buttons, Learn how to style outline buttons with CSS. color: white; } /* Gray */ .default { border-color: #e7e7e7; color: black; } .default:hover { background: #e7e7e7; }. Windows 10’s Redstone 5 update, which will be released to the stable Windows build sometime in Fall, 2018, uses a gray window border by default. To apply your accent color to your window borders, scroll down to the “Show accent color on the following surfaces” section, and then enable the “Title bars and window borders” option.


CSS Buttons, .button { background-color: #4CAF50; /* Green */ border: none; color: white; By default, the size of the button is determined by its text content (as wide as its Button. Remove margins and add float:left to each button to create a button group :� Tags css - How to remove borders around textbox when adding background css - How to remove the border highlight on an input text element css - remove borders around html input css input focus border color css input outline CSS outline-color property Glowing Blue Input Highlights html - remove the border when focusing on an input box input focus