Impossible to style form inputs

Hello everyone,

I am having tremendous difficulty in styling form inputs, specifically checkboxes. Next to each checkbox is a word - how do I style it? Can I change the text-color, font-size or add a border around the checkboxes?

For example, here I’m trying to give the text ‘banana’ a yellow color :rolleyes::

<input type="checkbox" style="color:yellow" name="fruits[]" value="banana">banana 

Thank you in advance.

Hi RedBishop,

Use a label tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
Not only will you be able to style the text contained within it, but it has accessibility benefits, too.

Thank you Pullo,

its all working now.

I was rather surprised to get a reply from you in the CSS forum! Then again, this was the first time I posted in this particular forum.

Anyway, thanks again.

That Pullo gets everywhere :slight_smile:

Yeah, like a bad smell super hero.
:slight_smile:

Glad you got the form working RedBishop.
Label tags are great, as they allow you to associate text or other elements with a particular input element. So in your case, clicking on the text “banana” would activate the associated checkbox.
That’s especially for those users who might have trouble operating a mouse with enough precision to select the check box itself.

That Pullo gets everywhere

Yes, he sure does.

So in your case, clicking on the text “banana” would activate the associated checkbox.

Very useful indeed, thanks.