The spin control buttons on the right of the input type=date are not properly aligned vertically

I've encountered an issue while trying to create a date picker using the code below in Chrome version 54.

<input type="date">

Here is the CSS I'm using:

input {
        height: 35px;
        line-height: 35px;
        box-sizing: border-box;
        vertical-align: middle;
}

The problem arises in the result where the buttons on the right are not vertically aligned properly, as they align to the top instead of the middle.

https://i.sstatic.net/C8w9V.png

Does anyone know of a way to fix this so that the buttons align to the middle?

Answer №1

To adjust spacing, you can utilize padding.

input {
        height: 45px;
        line-height: 45px;
        box-sizing: border-box;
        vertical-align: middle;
        padding:10px 0px;
}

<input type='text'>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding text to the top edge of a container using CSS in HTML

I'm having trouble figuring out how to position text at the top of a box using CSS. Here is my current code: .boxed{ border: 1px solid grey; width: 300px; height: 180px; } My goal is to place text at the top border of the box. Can anyone ...

There was an issue loading the map on an HTML code that was returned from an ajax request

I'm currently working on building my own personal website, which is also my first webpage, and I'm encountering some difficulties with displaying a Google map. Here's a breakdown of my situation: my webpage consists of four links that load ...

javascript css ajax google-maps

The hyperlink will not work

Check this out: When you go to the Graphic Design section in the graphic section and click on "View more Information," nothing happens. The code in that section looks like this: [columns] [two_third] [animated_item] <img class="size-full wp-image-536 ...

html wordpress wordpress-theming

Python script using Selenium to only print elements in an HTML page that have a specific class value and print only certain elements based on

I am currently developing a script to automatically test all the free proxies available on The website contains a comprehensive list of all available proxies, and I have successfully made my script extract and display them. However, I only want to display ...

python html selenium web-scraping proxy

What is the method for aligning a glyph vertically?

Can anyone help with aligning the glyph vertically to the text? Currently, it seems more like it's attached to the bottom. Here is an example: <a href="#">Zoom</a> a { font-family: 'Open Sans', sans-serif; font-weight: ...

html css alignment glyph

Encountering an error while trying to load a CSS file in a React project using webpack due

I'm currently working on a React project that utilizes styled components, and I've been attempting to integrate a CSS file as part of the react-image-gallery package. Following the instructions provided, I included the css-loader and style-loade ...

javascript css reactjs webpack

When a user clicks on a navigation link, the arrow pointer changes

I have successfully implemented a right arrow pointer on my navigation list. When clicking on these navigation links, they open a sub-navigation list. However, I am trying to make the arrow change to point downwards when the link is visited, but so far w ...

Adding and removing dynamic fields with Bootstrap functionality

Recently, I've been trying to develop a feature where users can add and remove fields by clicking on a button. However, I've encountered a roadblock in my progress. If you take a look at this CodePen link, you'll see what I have so far. My a ...

javascript html twitter-bootstrap

Incrementing the image name by 1 each time a new image is added to the directory

Currently honing my PHP skills and in the learning process. Developed a simple script that enables users to upload images to a directory on the server. I aim to append a number at the end of each image name to prevent duplication. Here is my attempt at i ...

php html image upload

Align the h1 vertically within a div without any extra space around it

I am trying to vertically center my content div within my header div without any extra space around it. I had it working before but the width of the content div would always be 100%. Here is the code I used: #header { position: absolute; width: 100% ...

Tips for creating a clickable title that directs to a URL

I am currently using the "Import All" WordPress plugin to bring in an Excel file containing numerous hyperlinks that point to specific Custom Post Types and a designated field. These hyperlinks are separated by commas from the corresponding title. For exam ...

php html jquery css wordpress

Struggling to get the font-weights of the Typography and Button components in the new React with Material-UI to display

In both my previous and most recent React applications, I have the following code snippets: <Typography variant="h6" color="inherit" noWrap > h6. Heading </Typography> <Button type="button" size="large" color="primary" > ...

css reactjs material-ui create-react-app

What is the best way to receive a user's input date in Dynamics 365 using HTML/JavaScript?

My HTML webform is set up to capture user input like address, card number, city, and state in text format. However, within Microsoft Dynamics 365, I have a custom entity with fields for this information. When a user completes the webform and submits it, a ...

javascript html dynamics-crm

"Capture live video using the reverse camera with the HTML5-QR Code

Recently, I started utilizing a JavaScript library called html5-qrcode (https://github.com/mebjas/html5-qrcode) for scanning QR Codes directly from my browser. The performance of this library is exceptional - it's fast and seamless! https://i.sstatic ...

javascript html camera qr-code

Applying CSS selectors to target child elements within a select option

I am looking to apply a CSS selector only on select option child values. I have assigned an id to the selector and now I want to apply different CSS styles to each child (child 1, child 2, etc). <select name="options[81]" id="select_81" class="required ...

What is the best way to change the height of a div element as the user scrolls using JavaScript exclusively?

Coding with JavaScript var changeHeight = () => { let flag = 0; while(flag != 1) { size += 1; return size; } if(size == window.innerHeight/2){ flag == 1; } } var size = 5; document.body.style.height = &qu ...

javascript html css

Clustering in an environment requires merging and minifying granules

While Granule is effective for minifying and merging CSS/JS files on a local environment, it presents challenges in clustered environments. The issue arises when each node of the cluster computes its own file during runtime, causing discrepancies when a us ...

javascript css yui minify

creating tabulations and charts across various while loops

My goal is to create Tabs using information from the first while loop, and then populate a table within each Tab using data from the second while loop. The data is fetched date-wise from my 'treatment' table to generate the Tabs. The line items ...

Provide solely the specified content range

While working with Node.js, my goal is to develop a video server that can serve a specific portion of a larger media file. Thanks to this gist, I have successfully created a video server and integrated it with an HTML5 video player using: <video contr ...

javascript html node.js video header

What is the best way to assign the task of constructing to a specific method?

Currently working on a Groovlet and trying to streamline the HTML building process by utilizing a method, but running into some issues. Below is a snippet of my code: def pages = [page1: html.p("page1")] html.html { p("p") pages[page1] } The expected ...

html groovy builder groovlet

CSSer Q&A