CSS не отвечает в Edge, как в Chrome для заполнителей ввода даты и «контента»

Question

У меня есть 2 отдельных вопроса, но оба они относятся к тому, как Chrome отображает вещи против Edge. По сути, я хочу, чтобы в Edge 2 элемента выглядели одинаково, как в Chrome

1. Заполнители ввода даты

Chrome - Как и должно быть, заполнитель очень легкий.

Край = заполнитель все еще темный. Я не могу понять, как заставить его реагировать на CSS

Я пытался использовать input [type = "date"] и затем следовать за ним с помощью :: webkit- а также :: - мс. Ни один из тех не работал. Я пробовал встречаться с кавычками и без них. Я попытался добавить :: webkit-datetime-edit-text, как предложили несколько вещей. Я очистил свой кеш, и другие элементы CSS изменились, поэтому я знаю, что это не так. Я добавил и удалил важные теги. Ничего даже почти не сработало.

/*This is for Google Chrome*/
input::placeholder, input[type=date]::-webkit-datetime-edit {
    color: rgba(29, 55, 92, .3) !important;
    font-size: 1em !important;
    font-style: oblique;
}

/*This is for MS Edge*/
input[type="text"]::-ms-input-placeholder, input[type="tel"]::-ms-input-placeholder, input[type="email"]::-ms-input-placeholder, input[type="number"]::-ms-input-placeholder {
    color: rgba(29, 55, 92, .3) !important;
    font-size: 1em !important;
    font-style: oblique;
}

input[type=date]:focus::-webkit-datetime-edit {
    color: black !important;
}


input[type=date]:valid::-webkit-datetime-edit {
    color: black !important;
}

2. Цвет содержимого не работает

РЕДАКТИРОВАТЬ: Вот кодовое поле для заполнителей: Пользовательские флажки

Цвет и расположениене работает в Edge. Однако Edge знает, что они существуют:

Я вижу, что изображение зачеркнуто. Это как-то связано с этим? В Chrome этого не происходит, поэтому я не знаю, как бы это исправить.

Chrome - флажок белого цвета и правильно установлен внутри коробки

Edge - флажок зеленого цвета и находится не в нужном месте

.checkmark, .checkmarkSquare {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee; /*light grayish-beige*/
    border-radius: 50%;
}
/* Create the checkmark */
.checkmark:after, .checkmarkSquare:after {
    content: '\02714'; 
    color: white;
    display: none;
}

Answer 1

1. Заполнители ввода даты

Об этой проблеме я попытался протестировать ее с MS Edge и смог создать проблему. Вполне возможно, что это поведение Edge по умолчанию. Я постараюсь отправить отзыв об этой проблеме.

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

Пример кода, как показано ниже:

<style>
    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: red; /*rgba(29, 55, 92, .3)  gainsboro red*/
        opacity: 1; /* Firefox */
    }

    :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: red; /*rgba(29, 55, 92, .3)*/
    }

    ::-ms-input-placeholder { /* Microsoft Edge */
        color: red; /*rgba(29, 55, 92, .3)*/
    }
</style>
<input type="text" name="fname" placeholder="mm/dd/yyyy">

Снимок экрана, как показано ниже:

Кроме того, поскольку последняя версия браузера Microsoft Edge основана на Chromium, если мы используем их, ваш код работает хорошо, мы могли бы изменить цвет заполнителя ввода типа даты. Вы можете скачать его с здесь .

Цвет содержимого не работает

используете ли вы какую-то тему CSS? Я пытаюсь добавить флажок и не могу воспроизвести проблему, как показано на скриншоте. Результат выглядит следующим образом:

Похоже, что это поведение браузера по умолчанию, вы можете попробовать использовать Microsoft Edge (на основе хрома) для отображениявеб-страница.

Редактировать :

Цвет содержимого не работает

РЕДАКТИРОВАТЬ: Вот кодовое поле для заполнителей: Пользовательские флажки

Пожалуйста, используйте следующий код:

<style>
    .center {
        position: absolute;
        top: 50vh;
        left: 40vw;
    }
    /* The container */
    .container {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        /* Hide the browser's default checkbox */
        .container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

    /* Create a custom checkbox */
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
    }

    /* On mouse-over, add a grey background color */
    .container:hover input ~ .checkmark {
        background-color: #ccc;
    }

    /* When the checkbox is checked, add a blue background */
    .container input:checked ~ .checkmark {
        background-color: #1D375C;
        box-shadow: darkgray 2px 2px 8px;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the checkmark when checked */
    .container input:checked ~ .checkmark:after {
        display: block;
    }

    /* Style the checkmark/indicator */
    .container .checkmark:after {
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
</style>
<div class="center">
    <div>
        <label class="container">
            One
            <input type="checkbox" checked="checked">
            <span class="checkmark"></span>
        </label>
        <label class="container">
            Two
            <input type="checkbox">
            <span class="checkmark"></span>
        </label>
        <label class="container">
            Three
            <input type="checkbox">
            <span class="checkmark"></span>
        </label>
        <label class="container">
            Four
            <input type="checkbox">
            <span class="checkmark"></span>
        </label>
    </div>
</div>

Результат выглядит так: