CSS 浏览器的文本选择高亮颜色

Question

是否可以获得浏览器的默认（或主题，假设有浏览器主题？我从未看过）文本选择颜色？

背景

我正在尝试使<input type="date" /> 表现得像它具有placeholder 属性一样，就像HTML5 <input type="text" /> 一样。万一这很重要，我正在使用 Bootstrap。

到目前为止，我有

CSS

/* allow date inputs to have placeholders */
/* display placeholder text */
input[type="date"].emptyDate:before {
    content: attr(placeholder);
    color: #999;
}

/* hide default mm/dd/yyyy text when empty value and not in focus */
input[type=date].emptyDate:not(:focus) {
    color: transparent;
}

/* hide default mm/dd/yyyy text when empty value, not in focus, and
   selected (ctrl + a) */
input[type="date"].emptyDate::selection:not(:focus) {
    color: transparent;
    background-color: lightblue;
}

/* hide placeholder text when empty value, but in focus */
input[type="date"].emptyDate:focus:before {
    content: "";
}

Javascript

function setEmptyDateInputClass(input) {
    if ($(input).val()) {
        $(input).removeClass("emptyDate");
    } else {
        $(input).addClass("emptyDate");
    }
}

$(document).ready(function () {
    $.each($("input[type=date]"), function (i, input) {
        // set initial class
        setEmptyDateInputClass(input);

        // set class on value change
        $(input).change(function () { setEmptyDateInputClass(this);});
    });
});

问题

我有两个问题。第一个，也是我在这个问题中提出的问题（如果每个人都遵守规则并且没有人发布多个问题的答案，我将发布另一个问题）是，有没有办法获得浏览器的默认（或主题）选择背景颜色，以便使用 CSS 或手动使用 Javascript，lightblue 不是静态的？ （另外，浅蓝色不是正确的颜色，但这只是截图和 mspaint 的问题。）

input[type="date"].emptyDate::selection:not(:focus) {
    background-color: lightblue;
}

我的第二个额外问题是，我在选择 :before::selection 以设置所选 ::before 内容的背景颜色时遇到问题。

/* always active when .emptyDate */
input[type="date"].emptyDate::selection:before {
    background-color: lightblue;
}

/* never active */
input[type="date"].emptyDate:before::selection {
    background-color: lightblue;
}

Answer 1

您可以像这样在::selection 上使用特异性：

CSS

.red::selection {
   background-color: red;
   color: #fff;
   }

.green::selection{
   background-color:green;
   color:#fff;
   }

HTML

<span class="red">I am highlighted in red, </span>
<span class="green">and I am highlighted in green,</span>
<span class="">and I am highlighted as per browser default.</span>

示例：http://www.bootply.com/KEEvWSlP0F