How do I style css radio buttons and labels

Question

Given the code bellow  how do I style the radio buttons to be next to the labels and style the label of the selected radio button differently than the other labels    x000D   x000D   lt link href  http   yui yahooapis com 2 5 2 build reset-fonts-grids reset-fonts-grids css  rel  stylesheet  gt  x000D   lt link href  http   yui yahooapis com 2 5 2 build base base-min css  rel  stylesheet  gt  x000D   x000D   lt div class  input radio  gt  x000D     lt fieldset gt  x000D       lt legend gt What color is the sky  lt  legend gt  x000D       lt input type  hidden  name  color  value    id  SubmitQuestion    gt  x000D       lt input type  radio  name  color  id  SubmitQuestion1  value  1     gt  x000D       lt label for  SubmitQuestion1  gt A strange radient green  lt  label gt  x000D       lt input type  radio  name  color  id  SubmitQuestion2  value  2     gt  x000D       lt label for  SubmitQuestion2  gt A dark gloomy orange lt  label gt  x000D       lt input type  radio  name  color  id  SubmitQuestion3  value  3     gt  x000D       lt label for  SubmitQuestion3  gt A perfect glittering blue lt  label gt  x000D     lt  fieldset gt  x000D   lt  div gt  x000D   x000D   x000D    Also let me state that I use the yui css styles as base  If you are not familir with them  they can be found here    reset-fonts-grids css base-min css   Documentation for them both here   Yahoo  UI Library   pkaeding  Thanks  I tried some floating both thing that just looked messed up  The styling active radio button seemed to be doable with some input type radio  active nomination on a google search  but I didnt get it to work properly  So the question I guess is more  Is this possible on all of todays modern browsers  and if not  what is the minimal JS needed

User · Answer

For any CSS3-enabled browser you can use an adjacent sibling selector for styling your labels

input:checked + label {
    color: white;
}

MDN's browser compatibility table says essentially all of the current, popular browsers (Chrome, IE, Firefox, Safari), on both desktop and mobile, are compatible.

User · Answer

This will get your buttons and labels next to each other  at least   I believe the second part can t be done in css alone  and will need javascript   I found a page that might help you with that part as well  but I don t have time right now to try it out  http   www webmasterworld com forum83 6942 htm   lt style type  text css  gt   input input     float  left     input label     margin  5px     lt  style gt   lt div class  input radio  gt       lt fieldset gt           lt legend gt What color is the sky  lt  legend gt           lt input type  hidden  name  data Submit  question   value    id  SubmitQuestion    gt            lt input type  radio  name  data Submit  question   id  SubmitQuestion1  value  1     gt           lt label for  SubmitQuestion1  gt A strange radient green  lt  label gt            lt input type  radio  name  data Submit  question   id  SubmitQuestion2  value  2     gt           lt label for  SubmitQuestion2  gt A dark gloomy orange lt  label gt           lt input type  radio  name  data Submit  question   id  SubmitQuestion3  value  3     gt           lt label for  SubmitQuestion3  gt A perfect glittering blue lt  label gt       lt  fieldset gt   lt  div gt

User · Answer

The first part of your question can be solved with just HTML  amp  CSS  you ll need to use Javascript for the second part   Getting the Label Near the Radio Button  I m not sure what you mean by  next to   on the same line and near  or on separate lines  If you want all of the radio buttons on the same line  just use margins to push them apart  If you want each of them on their own line  you have two options  unless you want to venture into float  territory     Use  lt br   gt s  to split the options apart and some CSS to vertically align them       lt style type  text css  gt       input input               width  20px         lt  style gt   lt div class  input radio  gt       lt fieldset gt           lt legend gt What color is the sky  lt  legend gt           lt input type  hidden  name  data Submit  question   value    id  SubmitQuestion    gt            lt input type  radio  name  data Submit  question   id  SubmitQuestion1  value  1     gt           lt label for  SubmitQuestion1  gt A strange radient green  lt  label gt           lt br   gt           lt input type  radio  name  data Submit  question   id  SubmitQuestion2  value  2     gt           lt label for  SubmitQuestion2  gt A dark gloomy orange lt  label gt           lt br   gt           lt input type  radio  name  data Submit  question   id  SubmitQuestion3  value  3     gt           lt label for  SubmitQuestion3  gt A perfect glittering blue lt  label gt       lt  fieldset gt   lt  div gt     Follow A List Apart s article  Prettier Accessible Forms   Applying a Style to the Currently Selected Label   Radio Button  Styling the  lt label gt  is why you ll need to resort to Javascript  A library like jQuery is perfect for this    lt style type  text css  gt       input label focused               background-color   EEEEEE          font-style  italic         lt  style gt   lt script type  text javascript  src  jquery js  gt  lt  script gt   lt script type  text javascript  gt        document  ready function                 input  radio   focus updateSelectedStyle               input  radio   blur updateSelectedStyle               input  radio   change updateSelectedStyle               function updateSelectedStyle                 input  radio   removeClass  focused   next   removeClass  focused                input  radio checked   addClass  focused   next   addClass  focused           lt  script gt    The focus and blur hooks are needed to make this work in IE

[html] How do I style (css) radio buttons and labels?

Examples related to html

Examples related to css

Examples related to radio-button

Examples related to styles