Changing background color when highligted

Question

Can anyone help me? I have a textarea and three buttons with different colors.

I wanted to change the hightlighted text bgcolor when button click in javascript or css. Please help. I don't really done this, but I have a sample of CKEDITOR.

This the Sample of CKEDITOR:

This my code in textarea:

<textarea>
  <p> CHANGING BACKGROUND </p>
</textarea>

Answer 1

You can't do this in a textarea. You need an HTML Element with contentEditable .

And take a look to document.execCommand()

Also you can simulate a <textarea /> with CSS.

Everything is showed below:

 function setColor() { document.execCommand('backColor', false, "red"); } 

 div[contentEditable] { -moz-appearance: textfield-multiline; -webkit-appearance: textarea; border: 1px solid gray; font: medium -moz-fixed; font: -webkit-small-control; height: 28px; overflow: auto; padding: 2px; resize: both; width: 400px; } 

 <div contentEditable="true">this is some text</div> <button onclick="setColor();">change color</button>