字体真棒选择器颜色

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伪元素注入图标，浏览器似乎无法正确选择它。 请注意，如果在图标之前有换行符并且您也选择了上一行，则它可以工作（排序）。

解决方法是直接在标记上添加字符（在这种情况下，它是 ）。 演示 。

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

Answer 2

这是一种字体 ，所以你只需使用color

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

编辑

这是您可以在不添加任何HTML的情况下获得的关闭 。 你不能选择字体真棒图标，只是内部的东西

编辑2

如果你愿意使用一点点javascript，你可以使用像这个版本的周围div。 您可以通过自定义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);