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

问题

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

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

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

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

CSS浏览器的文本选择突出显示颜色

背景

问题

1 个答案: