1

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

我知道它可以通过使用此代码更改除字体真棒之外的所有内容

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

例子

我还测试了以下内容：

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

2 回答 2

3

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

一种解决方法是直接在标记上添加字符（在本例中为）。演示。

当然，这仅适用于具有font-family: FontAwesome（字体 awesome CSS 将其添加到所有具有 class 的元素icon-[something]）的元素。

于 2013-08-20T03:14:16.297 回答
1

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

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

编辑

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

编辑 2

如果您愿意使用一点点 javascript，您可以使用像这个版本这样的周围 div 来做到这一点。您可以通过自定义颜色完全按照您想要的方式制作。如果您还有其他问题，请告诉我。

编码

<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);
于 2013-08-20T01:13:28.213 回答