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.

  • Welcome to UX.se. Unfortunately, your question is too broad. If you have a specific problem, please ask about that. – JohnGB Jul 9 '13 at 11:52
  • I second @JohnGB, you should try GraphicDesign forums for that. And btw get rid of the dropshadow from the input field. – Nash Vail Jul 9 '13 at 13:07
  • This question appears to be off-topic because it is about graphic design. – Gala Jul 9 '13 at 14:58

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).
  • " switching the state should change the state inside the checkbox/radio instead changing the style of the element totally", @Dominik, I didn't understand this part of your answer, do you mean that the blue icon shouldn't be there at all? and also what do you mean by highlighting the field name? wouldn't it be more convenient if the user just clicks on the link and the option gets selected? – Anuj Kaithwas Jul 9 '13 at 10:56
  • Yes, kinda. This may be my personal perception, though. The whole idea of checkbox is taken from real life (paper forms) where you just put a mark inside a box. In this case, there is an overlay placed over a box, which - for me - is a little bit disturbing. But as I said, it may be just my perception. Functionally it does not matter, user will know what has happened. Maybe it would be enough to keep the border visible in the selected state. – Dominik Oslizlo Jul 9 '13 at 10:58

Not the answer you're looking for? Browse other questions tagged or ask your own question.