Устранение пробела в дате ввода - PullRequest
Новая
       0

Устранение пробела в дате ввода

0 голосов
/ 21 апреля 2020

Я пытаюсь стилизовать ввод type = 'date', чтобы он занимал меньше места, но я не могу понять, как устранить разрыв между индикатором и текстом или как разрешить сжатие даты как текстового поля .

Я гуглил около 3 часов и нашел только это: https://www.tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/#input_date

Ни один из них не позволяет мне убрать пробел. 

        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>

1 Ответ

0 голосов
/ 21 апреля 2020

Интерпретация вопроса немного сложна, так как он плохо формулирует, что означает to be shrunk like a text field.

Делая все меньше

Вы можете использовать zoom: 0.5; или transform: scale(0.5);, чтобы сделать ввод меньше через CSS.

Соответствующий ответ о размере флажка { ссылка }

Как и в предыдущем ответе, zoom считается лучше в некоторых браузерах, но Я не проверял это. 

// @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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...