更改 HTML/CSS 中的日期输入突出显示颜色

Question

我的页面中有一个日期类型的输入，我想更改其中突出显示的颜色。我不知道是否有 CSS 选择器。

这是我正在谈论的内容的图片：

这就是我正在尝试做的事情：

致

如何才能做到呢？有办法吗？

Answer 1

如果我找到“非 webkit”解决方案，我会更新它。

感谢 Zurb GitHub 存储库上的 dboskovic：

input::-webkit-datetime-edit-day-field:focus,
input::-webkit-datetime-edit-month-field:focus,
input::-webkit-datetime-edit-year-field:focus {
    background-color: red;
    color: white;
    outline: none;
}

Answer 2

我将日期输入为文本框，以便::selection 可以对其进行操作。这在 Chrome 和 Edge 中适用于我，但我注意到当在同一语句中与 -moz 结合使用时，它会停止工作。

<style>
    #myInput {
        color: rgb(0, 255, 144); 
    }
    #myInput::selection {
        background-color: rgba(248, 90, 192, 0.56); 
    }
    #myInput::-moz-selection {
        background-color: rgba(248, 90, 192, 0.56); 
    }
</style>

<div class="row">
    <input type="text" id="myInput" value="Test input text" />
</div>

Answer 3

这可能会有所帮助，更改了 bootstrap.css 中的以下 css 条目

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: rgba(126, 239, 104, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}