0

I would like it so when the user selects a font size which would be applied to the label, which will then resize the size of the input so that they always stay in proportion.

Jihad Naser
  • 29
  • 1
  • 2
    I disagree with the close vote. This is not too broad and should not be closed for that reason. radios and checkboxes are notoriously hard to style because the browser takes over that functionality. For some browsers just adding height and width only increase the bounds of the clickable area while leaving the same small checkbox/radio in the middle. The question at hand is how to style checkboxes and radios. – Joseph Marikle Feb 24 '15 at 14:43
  • 1
    While the question isn't too broad, it has been covered quite a bit. Here's a good question and answer illustrating the method of using styled labels (this uses CSS3 `:checked`): http://stackoverflow.com/questions/13316966/css-checkboxes-radio-buttons-when-input-is-inside-label. The idea is to not even display the input. You can make a label look like anything. Here's an example I made using font awesome: http://jsfiddle.net/sp39w0t8/. – Joseph Marikle Feb 24 '15 at 14:49
  • Hi Joseph, that's exactly what I was looking for, thank you for helping out! – Jihad Naser Feb 24 '15 at 14:55
  • You're welcome. Glad I could help out. :) I'll post the gist of my comment as an answer for completeness sake. – Joseph Marikle Feb 24 '15 at 14:59

2 Answers2

0

Little search on google: Resizing radio button

CSS:

input[type='radio'] {
    transform: scale(2);
}

You could change the value using basic javascript or php. I would go for javascript since it is easier

Community
  • 1
  • 1
VMeijer
  • 415
  • 1
  • 5
  • 15
  • It doesn't seem to work in chrome or safari on mac. code: http://jsfiddle.net/daudd63u/. screen cap: http://i.imgur.com/vcHv29W.png. It does work in firefox. – Joseph Marikle Feb 24 '15 at 14:55
0

The inherent issue is that browsers don't like input styles to be changed when it comes to radios and checkboxes. webkit in particular will increase the bounding box but the radio or checkbox itself will remain the same size. The best approach I've seen for this is to use a styling trick with labels. First, give your radios/checkboxes and labels corresponding id and for attributes. Second, make sure the label immediately follows the input in your markup. Third, style the label similar to an unchecked checkbox or radio. Fourth, style input[type=checkbox]:checked + label or similar as the checked state. Lastly, completely hide the input with display:none or similar.

This method relies on CSS3s :checked pseudo-class, which is IE 9+ for compatibility. The result is a block level element that you can style to look like a checkbox and avoid the frustration of working with browser styles for inputs.

Here is a demo that uses this method with varying font sizes: http://jsfiddle.net/m38unvw6/
Here is another question/answer with more info: CSS checkboxes & radio buttons when input is inside label?

Community
  • 1
  • 1
Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129