字体真棒选择器颜色

Question

我想知道是否可以更改字体真棒图标的选择器颜色

我知道可以通过使用此代码来改变除字体之外的所有内容

::selection{
    background: #ffb7b7 !important; /* Safari */
}
::-moz-selection {
    background: #ffb7b7; /* Firefox */
}

我还测试了以下内容：

.icon-2x::selection {
    background: #ffb7b7 !important; 
    }
i::selection {
    background: #ffb7b7 !important; 
    }

Answer 1

问题似乎是字体很棒的CSS使用::before伪元素注入图标，浏览器似乎无法正确选择它。请注意，如果在图标之前有换行符并且您也选择了上一行，则它可以工作（排序）。

解决方法是直接在标记上添加字符（在本例中为）。的 Demo

如果当然这只适用于font-family: FontAwesome的元素（字体很棒的CSS会将其添加到具有类icon-[something]的所有元素）。

Answer 2

这是一种字体 ，因此您只需使用color

i::selection {
    background: #ffb7b7; 
    color:red;
}

编辑

Here is the closes you can get without adding any HTML。你不能选择字体真棒图标，只需选择里面的东西

编辑2

如果你愿意使用一点点javascript，你可以使用周围的div like this version来做。您可以通过自定义colros使其完全按照您想要的方式进行。如果您有任何其他问题，请与我们联系。

代码

<div class='selectable'><i id='newSelect0' class="icon-cog"></i>.</div>

// CSS
i {
    background: transparent;
    color:black;
}
.selectable {
    color:transparent;
}
.selectable::selection {
    color:transparent;
}

// Javascript
setInterval(function () {
    if (window.getSelection) {
        var text = window.getSelection().toString();
    }
    var selectable = document.getElementsByClassName('selectable');
    for(var t = 0; t < selectable.length; t++)
    {
        var elem = document.getElementById('newSelect' + t);
        if (text != '' && window.getSelection().anchorNode.parentNode == selectable[t]) {
            elem.style.background = '#ffb7b7';
            elem.style.color = 'green';
        } else {
            elem.style.background = 'white';
            elem.style.color = 'black';
        }
    }
}, 20);