CSS-стиль для ввода [type = 'date'] для браузеров, отличных от Chrome - PullRequest
Новая
       17

CSS-стиль для ввода [type = 'date'] для браузеров, отличных от Chrome

1 голос
/ 07 июня 2019

Есть ли эквивалентный код CSS 

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator

для firefox и microsoft edge? Пока что я не могу найти какие-либо документы / ресурсы, касающиеся оформления заполнителя для <input type='date'>. Любые рекомендации / ответы приветствуются.

Пробовал ::placeholder, ::-ms-input-placeholder и ::-moz-placeholder, но они не работают, когда тип ввода - дата.

В качестве альтернативы я с радостью приму ответ, если кто-нибудь подскажет, как скрыть заполнитель по умолчанию.

1 Ответ

0 голосов
/ 07 июня 2019

Используя инструменты разработчика F12 для проверки HTML и CSS, мы видим, что браузер Chrome, использующий sytelsheet пользовательского агента, и эти псевдоэлементы (:: - webkit) применяются к браузеру chrome, но в браузере Microsoft Edge он не используеттаблица агента пользователя, и эти псевдоэлементы не применяются к текстовому полю ввода даты.Итак, код не работает в Microsoft Edge.

Итак, я думаю, что вы можете попробовать использовать версию Microsoft Edge Dev (на основе хрома), код хорошо работает на нем.

В противном случае, какВ качестве обходного пути, я предлагаю вам обратиться к следующему коду, чтобы использовать текстовое поле и плагин DatePicker для отображения даты. 

<style>
    .input-field {
        position: relative;
        display: inline-block;
    }

        .input-field > label {
            position: absolute;
            left: 0.5em;
            top: 50%;
            margin-top: -0.5em;
            opacity: 0.5;
        }

        .input-field > input[type=text]:focus + label {
            display: none;
        }

        .input-field > label > span {
            letter-spacing: -2px;
        }

    .month {
        color: cornflowerblue;
    }

    .day {
        color: aqua;
    }

    .year {
        color:darkmagenta
    }

    .separate-letter {
        color: red
    }
</style>
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div class="input-field">
    <input id="input-text-field" type="text" class="date" data-selecteddate="" value="" />
    <label for="input-text-field">
        <span id="span_month" class="month">MM</span>
        <span class="separate-letter">/</span>
        <span  id="span_day" class="day">DD</span>
        <span class="separate-letter">/</span>
        <span id="span_year"  class="year">YYYY</span>
    </label>
</div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
    $(function ($) {
        $(".date").datepicker({
            onSelect: function (dateText) {
                //display("Selected date: " + dateText + "; input's current value: " + this.value);
                var dataarray = dateText.split("/")
                $("#span_month").html(dataarray[0]);
                $("#span_day").html(dataarray[1]);
                $("#span_year").html(dataarray[2]);

                //clear the textbox value
                this.value = "";
                $("#input-text-field").attr("data-selecteddate", dateText);
            }
        })            
    });
</script>

Такой результат (с помощью браузера Microsoft Edge):

enter image description here

...