Question

我有一个满足的div，它工作得很好！我唯一的问题是我在选择中看不到任何文字颜色，无论有些是红色还是有些是黑色，都是白色和蓝色。

我知道您可以使用CSS自定义您的选择：

<style>
    .customSelect::selection      { color: #F00; background: #333; }
    .customSelect::-moz-selection { color: #F00; background: #333; }
</style>

我有一个非常有用的功能来改变我选择的CSS：

<script type="text/javascript">

    function editCSS(css){
    document.execCommand('insertHTML', false, '<span style="'+css+'">' + 
    document.getSelection()+'</span>');
    }

</script>

问题是，如果您使用editCSS（）更改选择的颜色，您将不会通知不同的颜色，因为您没有通过选择看到新颜色...您将只看到onblur

Answer 1

我真的不是那么远！

<style>
    .customSelect::selection      { background: rgba(175,210,255,0.5); }
    .customSelect::-moz-selection { background: rgba(175,210,255,0.5); }
</style>

如果没有为文本颜色指定css颜色属性，则只有背景为蓝色，文本保持指定的颜色（正如我所寻找的那样！）。您必须将类customSelect放入div contenteditable并进入函数editCSS（）。

<script type="text/javascript">

    function editCSS(css){
    document.execCommand('insertHTML', false, '<span class="customSelect" ' +
    'style="'+css+'">'+document.getSelection()+'</span>');
    }

</script>

HTML CODE

<div class="customSelect" contenteditable>some text</div>

HTML5 div contenteditable - 通过选择查看文本颜色

1 个答案: