I recently discovered that some elements calculate their size using the following formula:
width = width - width_border_size * 2
height = height - height_border_size * 2
However, the <input> element does not adjust its size accordingly.
How can I resolve this issue? Below is my code:
.options_display {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.options_style * {
text-align: center;
font-size: medium;
font-family: arial;
padding: 0px;
margin-bottom: 2px;
width: 225px;
height: 25px;
}
p {
margin: 0px;
}
[hidden] {
display: none;
}<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width">
</head>
<body onload="">
<!-- Disable, hide first option -->
<div style="float: left; position: relative; left: 50%;">
<div style="float: left; position: relative; left: -50%;">
<div class="options_display options_style">
<select>
<option>Select test</option>
<option>Option 0</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<input type="number" placeholder="Input test 0">
<input type="number" placeholder="Input test 1">
<button onclick="">Button test</button>
<p id="text_id">Test</p>
</div>
</div>
</div>
</body>
</html>Edit: Attempted to create a specific class for inputs and calculated the height and width with border sizes, but the resulting height was not precisely 25, it was around 24.6 (or .4, possibly). Maybe considering the font size in the calculation could be a solution, although unsure how to achieve this.