Gorionovic
Gorionovic

Reputation: 185

Button style - ignore css

Is there a way to ignore Google CSS styling when creating a particular button ? Here is my jsfiddle, where I want to change my button width to 5 px, which is ignored because of the external CSS

HTML:

<input type="submit">

CSS:

input[type="submit"] {
height: 25px;
width: 5px;
border: 0;
-webkit-appearance: none;
}

Upvotes: 0

Views: 1199

Answers (3)

Chris Marsland
Chris Marsland

Reputation: 164

As Michael said, load your CSS stylesheet after the Google CSS and it will over right it. Or, you can add min-width: 5px; and max-width: 5px; to your button CSS and it will do the same job.

<style>
input[type="submit"] {
    height: 25px;
    min-width: 5px;
    max-width: 5px;
    border: 2px dotted red;
    -webkit-appearance: none;
    background: green;
    color: white;
    min-width: 0;
}
</style>
<input type="submit">

Upvotes: 0

Gerard
Gerard

Reputation: 15786

Use the following CSS:

input[type="submit"] {
  width: 5px;
  min-width: 5px;
}

Google CSS contains a minimum width of 72 pixels.

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53674

If you load your CSS after the google stylesheet, you can overwrite the styles with the selector you're using. And google applies min-width: 72px which you'll need to overwrite if you want the width to be 5px

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<style>
input[type="submit"] {
    height: 25px;
    width: 5px;
    border: 2px dotted red;
    -webkit-appearance: none;
    background: green;
    color: white;
    min-width: 0;
}
</style>
<input type="submit">

Upvotes: 3

Related Questions