Edge在日期输入占位符和'内容'中没有像在Chrome中那样响应。

Question

我有2个独立的问题，但都与Chrome如何显示内容与Edge有关。基本上，我希望使Edge中的这两项与Chrome中的相同]

1。日期输入的占位符

Chrome-应该是，占位符非常轻。

Edge =占位符仍然是黑暗的。我不知道如何使它响应CSS

我尝试使用input [type =“ date”]，然后同时使用:: webkit-和::-ms。这些都不起作用。我尝试过约会，但周围没有引号。我尝试添加:: 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-复选框为白色且已正确安装在框中

边缘-复选框为绿色，并且位置不正确

.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的，因此，如果我们使用它们，您的代码可以很好地工作，我们可以更改日期类型输入占位符的颜色。您可以从here下载。

'内容'颜色不起作用

您是否正在使用某些CSS主题？我尝试添加一些复选框，但无法重现该问题，如屏幕截图所示。结果是这样的：

似乎这是浏览器的默认行为，您可以尝试使用Microsoft Edge（基于铬）显示网页。