Skip to content
Advertisement

How to change the background-color of an input field based on the val of that input with jquery

I have an input field with a hex color value:

<input class="color" value="#ff0000" /> // ff0000 is red 

How can i read the val from this field and set the value as background-color for that field? So i want to achieve:

<input class="color" style="background-color: #ff0000;" value="#ff0000" />

Advertisement

Answer

Little help:

$(document).ready(function(){
   var bgcolor = $('.color').val(); // create var which reads the value from input with class .color
   $('.color').css( "background-color", bgcolor ); // now set css rule to the same .color class with that var
});
Advertisement