HTML5 div contenteditable - see text color through the selection

Question

I have a div contenteditable and it's working great! My only problem is that I can't see any text color inside a selection, it's all white and blue no matter if some are red and some others are black.

I know that you can customize your selection with CSS :

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

And I have a really useful function to change the CSS of my selection :

<script type="text/javascript">

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

</script>

The thing is that if you change the color of your selection with editCSS(), you won't notify the different because you don't see the new color through your selection... You will see it only onblur

Answer 1

I was really not that far!

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

If you don't specify the css color property for text color, you will only have the background in a blue color and the text keep the color assigned (as I was looking for!). You have to put the class customSelect into the div contenteditable and into the function 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>