Reputation: 185
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
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
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
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