Chrome shows different height for various input types such as time and number

Question

Chrome shows different height for various input types such as time and number

Having some trouble with input elements of different types and varying heights. For example, in Chrome the input type "time" appears taller than type "number." See the simplified illustration here: http://jsfiddle.net/4jteqy1f/

HTML

<article class="settings">
    <ul>
        <li>
            <input type="time" value="00:00">
        </li>
        <li>
            <input type="time" value="00:00">
        </li>
        <li>
            <input type="number" value="286">
        </li>
    </ul>
</article>

CSS

.settings ul li{
    display: inline-block;
    padding:5px;
    background-color: #dee7f8;
}

In this demonstration, the input of type "number" appears smaller compared to other input fields, especially in Chrome. However, it displays correctly in the latest Internet Explorer version. What could be causing this discrepancy and what are the possible solutions?

css html google-chrome

Answer 1

Answer №1

If you want to adjust the styling of your input elements, you can include the following CSS code:

input{padding: 0 0 0 3px; height: 20px; vertical-align: middle;}

The key concept here is to create enough space for the up and down buttons by setting the height to 20px, and using vertical-align: middle to center the text within the input field (this won't impact the appearance of the arrows themselves)

Feel free to explore the code provided above and experiment with different sizes to see how it affects the layout

.settings div li{
display: inline-block;
    padding:5px;
background-color: #dee7f8;
}
input{padding: 0 0 0 3px; height: 20px; vertical-align: middle;}

<article class="settings">
    <div>
        <li>
            <input type="time" value="00:00">
        </li>
        <li>
            <input type="time" value="00:00">
        </li>
        <li>
            <input value="286">
        </li>
    </div>
</article>

Answer 2

If you want to adjust the styling of your input elements, you can include the following CSS code:

input{padding: 0 0 0 3px; height: 20px; vertical-align: middle;}

The key concept here is to create enough space for the up and down buttons by setting the height to 20px, and using vertical-align: middle to center the text within the input field (this won't impact the appearance of the arrows themselves)

Feel free to explore the code provided above and experiment with different sizes to see how it affects the layout

.settings div li{
display: inline-block;
    padding:5px;
background-color: #dee7f8;
}
input{padding: 0 0 0 3px; height: 20px; vertical-align: middle;}

<article class="settings">
    <div>
        <li>
            <input type="time" value="00:00">
        </li>
        <li>
            <input type="time" value="00:00">
        </li>
        <li>
            <input value="286">
        </li>
    </div>
</article>

Chrome shows different height for various input types such as time and number

Answer №1

Similar questions

I recently ran npm install --save bootstrap and now I am unable to locate the bootstrap.min.css file anywhere

Why does the appearance of my PHP spreadsheet change when I attempt to print it?

What is the best method for embedding Microdata or JSON-LD for an ebook in SVG image format within an HTML5 document?

extra elements within the 'navbar-toggler' icon button

Adjust the size of the images in the Bootstrap navbar brand to make them resizable and move them

The jQuery Remove function that went haywire

Variations in CSS Stylesheets for Various Parts of the Body

What is the best way to link a Nav.Link to an ".html" webpage?

Is there a way to create a two-toned horizontal rule tag?

What is the method for assigning a class name to a child element within a parent element?

Arranging div elements with CSS styling

Switching the class for the pseudo-element :after

What is the best way to transfer data between HTML files using Python?

In IE8, the :last-child pseudo-class appears to be ineffective

The functionality of scrolling ceases to work once the bootstrap modal is closed

The vertical overflow feature does not seem to be functioning correctly with the

Ways to eliminate the dotted line from the image map in Internet Explorer 11

What's the reason for the element not inheriting margins from its parent?

Challenges in designing a 2-column layout using CSS

Is it possible to create a dynamic <hr /> using Flexbox?