HTML form input to change CSS font color

Question

I am trying to use an HTML form to submit a color value.

<form>
Font color:<br>
    <input type="color" name="colorInput">
    <input type="submit" value="Submit">
</form>

I then want to have the color value to replace another value for font color in CSS:

textarea {color: #fff;}

I'm new and have little experience with coding.

Thank you in advance!

LF-DevJourney · Accepted Answer · 2016-12-09 06:23:34Z

2

textarea {color: #fff;}

<form>
Font color:<br>
    <input type="color" name="colorInput">
    <input type="submit" value="Submit" onsubmit="return false"  onclick="document.getElementById('ss').style.color=colorInput.value; console.log(colorInput.value)">
</form>


<textarea id="ss"rows="10" cols="30">test</textarea>

edited Dec 9, 2016 at 6:23

answered Dec 9, 2016 at 5:43

LF-DevJourney

28.7k30 gold badges170 silver badges321 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Romero Somero Over a year ago

Thank you for your reply! I tried the code, and it worked. However, the page refreshes when I press 'Submit'. Is there any way around this? Thank you again!

LF-DevJourney Over a year ago

@RomeroSomero Ok you can use event.preventDefault(); or return false to not refresh page. I've edited it.

Romero Somero Over a year ago

I used event.preventDefault() and it worked! Thank you very much for all your help!

Deadpool Over a year ago

How to get the fiddle link?

Collectives™ on Stack Overflow

HTML form input to change CSS font color

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related