CSS not overriding user agent button style

Question

Ok it's the first time this occurs to me, i've ever used css locale in my machine for studying and this time it's having a strange behavior (or i think it is).

As i'm trying to style my page the styles are not applying to buttons. I've been searching for lots of fixes to this, like using a reset.css, speeling <!DOCTYPE html> right, having type="text/css" in my css declaration, etc.

Using inline css works fine, but writing the same code on a css file doesn't have effect, what's strange is that other css like for tables or the rest of the page works.

So apparently i can't overide user-agent-stylesheet button styles.

Here's my html file

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Botões</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/custom.css" />
  </head>
  <body>
    <div class="container">
      <ul id="flex-container">
        <li>
          <button class="btn normal">Apertar</button>
        </li>
        <li>
          <button class="full">Apertar</button>
        </li>
        <li>
          <button class="block">Apertar</button>
        </li>
        <li>
          <button class="outlined">Apertar</button>
        </li>
        <li>
          <button class="clear">Apertar</button>
        </li>
      </ul>
    </div>
  </body>
</html>

And my CSS file:

//PAGE:
html, body {
  height: 100%;
  box-sizing: border-box;
}

.container {
  width: 95%;
  margin: 0 auto;
}

ul#flex-container {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

ul li {
  text-align: center;
  padding: 30px 0;
  width: 20%;
  border: 1px dotted lightgray;
}

// ================================
button.btn {
  font-size: 2.3em;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  cursor: pointer;
}

And this is console output when i run this file

input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    padding: 1px 6px;
}
user agent stylesheet
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    background-color: buttonface;
    box-sizing: border-box;
    padding: 2px 6px 3px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-image: initial;
}
user agent stylesheet
input, textarea, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em 0em 0em 0em;
    font: 13.3333px Arial;
}
user agent stylesheet
input, textarea, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb;
}
user agent stylesheet
button {
    -webkit-appearance: button;
}

My files are structured like:

|- index.html
|- css folder
   |- custom.css
   |- reset.css

And this is what my button is looking like:

So why can't i override the user agent style if i always done things like this and worked? Is this a new Google Chrome update? Is there a way to make this work?

score 2 · Answer 1 · answered Apr 24 '17 at 22:45

As You said "Using inline css works fine" however using external stylesheet is not working . this is because the user agent stylesheet is more powerful than external stylesheet so you need to use !important keyword to make the rule the most powerful and this should fix the problem !.

pay attention to your css comments css comments should be like that /* you comment goes here */

and also pay attention to your selectors !! in your css you are selecting an element with btn class inside your button button .btn use .btn class instead

score 1 · Accepted Answer · answered Apr 24 '17 at 22:34

1

Your CSS comments are invalid. Syntax errors like that usually break whatever properties follow it.

//PAGE:
// ================================

should be

/* Page: */
/* =============================== */

answered Apr 24 '17 at 22:34

Michael Coker

52,626
5
64
64

CSS not overriding user agent button style

2 Answers2