Form-radio buttons with color fields?

I would like to make a form that has radio buttons (about 30) with different colors in their fields for the selection. I have not yet found a pre-made form that would do this. I do not yet know if I will be using WordPress or attempt hand coding. I would appreciate any suggestions. (I am new to all this. I did manage to learn - and validate - HTML and CSS a few years ago but I’ve forgotten everything. That doesn’t matter since everything has changed anyway.)

There is a color input type, if that is any use to you.

It does not have complete browser support though.

Otherwise it is a case of just having a series of radio inputs, each with maybe a hex value and a colour swatch next to it so you know what colour you are choosing.
Eg:-

<label for="red" style="background:#f00;">Red</label>
<input id="red" name="colour" value="f00" type="radio">

Etc…
I’m not normally one to encourage in-line styles, but you would need 30 classes in your css for this.
To save on the donkey work I would probably use a PHP array for the colours and foreach all the inputs out from that, but that’s another topic.

I don’t know if this is what you meant but I have an old codepen here of a routine I used for selecting colours of a product.

1 Like

Hi there evestigio12,

and a warm welcome to these forums. :sunglasses:

Check out the attachment, to see another odd example. :wonky:

coloured-radio-buttons.zip (39.5 KB)

coothead

4 Likes

Nice example coothead :slight_smile:

Hi there evestigio12,

After my rant about “arty-farty” styling nonsense here…

https://www.sitepoint.com/community/t/styling-an-optin-form/248574/2?u=coothead

…I would suggest that you ignore the contents of post #4. :unhappy:

It would be totally meaningless to anyone on a screen reader.

I have addressed that issue here…

coloured-radio-buttons-improved.zip (39.6 KB)

coothead

2 Likes

I thank each of you for your quick and helpful replies. I will not be able to truly ponder them and attempt using them until Tuesday but I wanted to enter my thanks now.

Best wishes for a healthy and prosperous New Year!

1 Like

Again I thank everyone for the suggestions. I really have been working on this for most of a month, learning from base line zero. As I worked your suggestions were making more sense, though I have far to go because I know nothing about php and cannabilized form postings with no understanding of forms.

I’m attaching a pdf of the colorfield radio buttons which indeed does look like I want them to look. (Whether the coding is correct and whether I can figure out how to make it work is another step.) I also am attaching what I think is the pertinent coding.

I really appreciate the help. Without it I would have given up.Mod2colorboxes8.css (4.4 KB)
RFQ-Just colorboxes2.html (8.3 KB)
Background color radios.pdf (78.6 KB)

I’m starting to understand this more. I may come back and try changes in codepen.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.