Removing the gap in input date

Question

I'm trying to style input type='date' to take less space, but I can't figure out how to remove the gap between the indicator and the text or how to allow date to be shrunk like a text field.

I've googled for about 3 hours and I've only found this: https://www.tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/#input_date

Neither of which allows me to remove the gap.

        input[type="date"]
        {
            background: lime;
        }

        input[type="date"]::-webkit-datetime-edit,
        input[type="date"]::-webkit-datetime-edit-fields-wrapper,
        input[type="date"]::-webkit-datetime-edit-text,
        input[type="date"]::-webkit-datetime-edit-month-field,
        input[type="date"]::-webkit-datetime-edit-day-field,
        input[type="date"]::-webkit-datetime-edit-year-field,
        input[type="date"]::-webkit-calendar-picker-indicator
        {
            padding: 0;
            margin: 0;
        }

        input[type="date"]::-webkit-inner-spin-button
        {
            display: none;
        }

<html>
    <body>
        <input type='date' value='2020-04-21'>
    </body>
</html>

What do you mean by *how to remove the gap between the indicator and the text or how to allow date to be shrunk like a text field*? Can you provide pictures? — Richard, Apr 21 '20 at 09:04
I guess you should remove the rid of x and add a custom one if you need it. Here a relevant issue [How to get rid of x and up/down arrow elements of a input date?](https://stackoverflow.com/questions/17954966/how-to-get-rid-of-x-and-up-down-arrow-elements-of-a-input-date). — Abdelrhman Arnos, Apr 21 '20 at 09:11

score 3 · Answer 1 · answered Jul 01 '21 at 11:46

3

I think this is what you (and I) were looking for:

::-webkit-calendar-picker-indicator{
    margin-left: -25px;
}

Thanks to @clod9353 answer in HTML input date, how to decrease space between date and icon? question.

answered Jul 01 '21 at 11:46

Kida

734
1
9
23

Ivar · Answer 2 · 2020-04-22T10:09:07.907

Interpretation of a question is a bit hard as it is not articulating well what to be shrunk like a text field means.

Making everything smaller

You could use zoom: 0.5; or transform: scale(0.5); to make input smaller through CSS.

Related answer about checkbox sizing https://stackoverflow.com/a/44626004/906265

As in above answer zoom is considered to look better on some browsers, but I did not test that.

// @supports https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
// zoom property https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
// transfrom property https://developer.mozilla.org/en-US/docs/Web/CSS/transform

@supports (zoom:2) {
input[type="date"] { background: lime; zoom: 0.5; }
}
@supports not (zoom:2) {
input[type="date"] { background: lime; transform: scale(0.5); }
}

<html>
    <body>
        <input type='date' value='2020-04-21'>
    </body>
</html>

Removing the gap in input date

2 Answers2

Making everything smaller