I am trying to style all the HTML elements by making a custom style sheet. Till now, i have succeeded in making only the radio-buttons and check-boxes. here is the link for the demo. I wanted to know what are the formal guidelines for UI designing while styling these controls so that they appear more clickable. And what more could be done to make the example more pleasant looking.
closed as too broad by JohnGB♦, rk., greenforest, Matt Obee, Gala Jul 9 '13 at 14:58
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
For this particular case, I would implement the following tweaks (some may be due to my personal preference, though):
- I am not sure about having checkmark inside the radio button - it's totally uncommon, so I would switch to a dot instead. Right now only the shape of the radio button gives a clue that it is a radio, not a checkbox
- switching the state should change the state inside the checkbox/radio instead changing the style of the element totally
- you have a hover state while an element is not selected - it would be nice to provide the same for an element that is selected as well
- I would block highlighting the field name (if someone double-clicks on text, the option gets highlighted).