CODEWITHSUNDEEP
cssbutton
user2128076
user2128076

Reputation: 13

button size in chrome

I am trying to set the size of a button in Chrome as very small ones, 4x4, or 5x5 px, but I´m getting some really weird results. My code is:

<input type="button" style="height: 4px; width: 4px; background-color: #aabbfe"; onclick="document.body.style.backgroundColor='#aabbfe'";/>

Although height and width are the same, the result is a horizontal rectangular button.

The only way I could get a square proportion (which is what I want) was setting height:14px by width: 5px, which does not make sense, and also, I simply can´t get the buttons to become smaller in Chrome.

Anyone could show me where did I go stupid? I´m sure I must be overlooking something very basic, but I just can´t find it. Thanks in advance for any help.

Upvotes: 1

Views: 807

Answers (2)

James Coyle
James Coyle

Reputation: 10398

Be sure to remove the margin and padding as well as the border if they are not required. These may all have an effect on the dimensions of an element.

Upvotes: 1

Daniel Imms
Daniel Imms

Reputation: 50149

You just need to remove the padding from the button.

JSFiddle

input {
    padding:0;
}

This is caused by the following style applied in the Chrome user agent stylesheet.

input[type="button"], 
input[type="submit"], 
input[type="reset"], 
input[type="file"]::-webkit-file-upload-button, 
button {
    padding: 1px 6px;
}

Upvotes: 3

Related Questions