css - CSS 在 Edge 中没有响应，因为它在 Chrome 中用于日期输入占位符和“内容”

Question

我有 2 个单独的问题，但都与 Chrome 与 Edge 的显示方式有关。基本上，我希望这两个项目在 Edge 中看起来与在 Chrome 中相同

1. 日期输入的占位符

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

边缘 = 占位符仍然是暗的。我不知道如何让它响应 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 中没有这样做，所以我不知道如何解决这个问题。

铬 - 复选框是白色的，并且正确地安装在盒子内

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

.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;
}

标签： cssgoogle-chromewebkitmicrosoft-edge

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（基于 Chromium）来显示网页。

编辑：

“内容”颜色不起作用

编辑：这是占位符的代码笔：自定义复选框

请参考以下代码：

<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>

结果是这样的：