html - Using color selector with example text -

i using <input type='color'> control on internal website.

(note: aware control not available in internet explorer. internal website used firefox , chrome.)

the colour selected used create highlighting background-color behind black text, , have words "example text" within control, can instantly see whether there going contrast issues.

for example, if select green in picker, see "example text" in black selected green background.

is there way this? i'm not aware of attribute on control allow it.

at first thought float text on top of it, of course stops button being clicked!

(obviously following snippet work if you're using browser supports control.)

.colorselector {      border:1px solid #000;      padding:0;      margin:0;      width:120px;      background-color:#fff;  }  #divouter{      position:relative;  }  #divexample{      position:absolute;      top:1px;      left:20px;  }

without text:<br/>  <input class="colorselector" type="color" value="#ff0000"/><br/>  <br/>  example text:<br/>  <div id="divouter">      <div id="divexample">example text</div>      <input class="colorselector" type="color" value="#ff0000"/>      </div>

i guess easiest solution have separate section has example text in it, , when colour selected sets background colour of section.

it nice have single control.

ok, easier thought, , have solution...

just add click event text element, , call click of colour picker directly...

$(function(){    $("#divexample").on("click", function(){      $("#colorselector").click();    });  });

.colorselector {      border:1px solid #000;      padding:0;      margin:0;      width:120px;      background-color:#fff;  }  #divouter{      position:relative;  }  #divexample{      position:absolute;      top:1px;      left:20px;      cursor:default; /* set same cursor colour selector*/  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  without text:<br/>  <input class="colorselector" type="color" value="#ff0000"/><br/>  <br/>  example text:<br/>  <div id="divouter">      <div id="divexample">example text</div>      <input class="colorselector" id="colorselector" type="color" value="#ff0000"/>      </div>