Force Chrome to set button size to fixed, not decimal
I add a simple button: <input type="button" value="test" />
The problem is that Chrome is using decimal numbers to calculate the size of the buttons. Here's a jsFiddle and box model measurement with a test button.
The reason is that when you dynamically hide the 15.333px height button and replace it with a div with a fixed 15px height, the container shrinks by 0.3333px and this gives a slight visual nudge to the page.
Is there a way to force Chrome to use fixed numbers for all measurements?
Thank.
source to share
I am using Chrome but I am not generating decimals. However, if you're having trouble, why don't you just overwrite Chrome's default sizing via CSS? Then if you change the button with a div (same height) you get a seamless visual effect. Here's an example:
input[type=button]{
line-height: 25px;
width: 50px;
height: 25px;
margin: 0;
padding: 0;
}
The default size will always be inconsistent. It depends on the browser, available system fonts, etc. It's always perfect to override the default style with your own code and use web fonts to ensure users have a consistent experience.
source to share
Well, to be honest, I don't know why Chrome buttons work the way they do, but you can always switch to your own custom buttons, for which you need to update something with a property border
. I also couldn't get the default chrome to have different heights than the default.
// WARNING ES2015 this won't work on older browsers
document.getElementById("replace").addEventListener("click", () => {
for(let el of document.body.querySelectorAll(".toggleMe")) {
el.classList.toggle("hidden");
}
});
input[type=button] {
height: 25px;
border: none;
}
.buttonReplacement {
height: 25px;
background-color: cornflowerblue;
}
.hidden {
display: none;
}
<input class="toggleMe" type="button" value="test" />
<div class="hidden toggleMe buttonReplacement">
test
</div>
<p>
<input type="button" value="replace" id="replace" />
</p>
But this basic example doesn't for custom buttons, so you can add effects :hover
, :active
and :focus
like this:
// WARNING ES2015 this won't work on older browsers
document.getElementById("replace").addEventListener("click", () => {
for(let el of document.body.querySelectorAll(".toggleMe")) {
el.classList.toggle("hidden");
}
});
input[type=button] {
height: 25px;
background-color: white;
border: 1px solid gray;
border-radius: 3px;
padding: 3px 8px;
cursor: pointer;
}
input[type=button]:hover {
background-color: #eee;
}
input[type=button]:active {
background-color: #999;
outline-offset: -1px;
}
input[type=button]:focus {
outline: none;
}
.buttonReplacement {
height: 25px;
background-color: cornflowerblue;
}
.hidden {
display: none;
}
<input class="toggleMe" type="button" value="test" />
<div class="hidden toggleMe buttonReplacement">
test
</div>
<p>
<input type="button" value="replace" id="replace" />
</p>
Note that the button cursor: pointer
is a very important property when interacting with the user . Also in :focus
you can also change the property outline
to none if you want to align the path.
source to share