I'm somewhat new to JavaScript and web-based programming, and a pet project I'm working on would really benefit from replacing terrible-looking radio buttons with actual button selectors that worked the same way as radio buttons.
A picture is worth a thousand words, but apparently I cannot post an image until my reputation increases, so let me try to describe this to you.
A horiozontal radio button list is a list of text items, enumerated in a horizontal row, with a selectable "circle" preceeding it. If one item is selected, the little "circle" preceeding it is filled in. Only one item in the list can be selected at once.
A horizontal button selector list is a horizontal grouping of buttons, with text in the center of each button representing the item to be selected. When you select the button with the item in the center, the button color changes somehow to show that it is the selected item. Only one button in the group can be selected at once.
The benefit of the button selection versus radio button selection is that it is easier for tablet and touch-screen users to select the items in a horizontal button selector list instead of a horizontal radio button list, and it is more visually appealing.
I have been able to figure out how to do vertical radio buttons, and horizontal radio buttons, but I want to extend the selector button idea and turn it into actual buttons. Can anyone provide a starting point for this? I have over 30 "topics" needing selection, and I can have up to 20 items to select from for a single "topic", so I want this to involve the least amount of coding as possible.
Thanks!
