Html Css更改日期输入突出显示颜色答案

【问题标题】：Html Css change Date input highlight colorHtml Css更改日期输入突出显示颜色
【发布时间】：2017-12-03 04:12:21
【问题描述】：

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

这是我正在谈论的图像：

感谢您的关心！ :)

编辑

这就是我想要做的：

到

【问题讨论】：

Change textbox highlight color的可能重复
@jimboweb 这不是一回事。帖子讨论了边框焦点颜色，但这里我说的是文本突出显示颜色
只使用背景色。并不难弄清楚
好的，那就试试这里：stackoverflow.com/questions/2258647/…
您需要在此处发布显示问题的标记的最小示例。 stackoverflow.com/help/mcve

标签： html css date web input

【解决方案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;
}

【讨论】：

您不想将颜色更改为与背景颜色相同的颜色，是吗？

【解决方案2】：

这可能会有所帮助，更改 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;
}

【讨论】：

这不能回答问题。他正在尝试设置日期输入的样式，而您的解决方案不适用于该类型的输入。

【解决方案3】：

我将日期输入作为文本框输入，因此 ::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>

【讨论】：

这不能回答问题。他正在尝试设置日期输入的样式，而您的解决方案不适用于该类型的输入。