You are viewing limited content. For full access, please sign in.

Question

Question

radio button side by side width

Forms

Updated July 25, 2016

asked on July 25, 2016 • Show version history

Hi,

Using forms i am trying to implement something like this.

And this is what i have so far.

I feel like it could be better. Radio buttons are kind of squished together. I have selected side by side.

Is there a way to make it look nicer or something similar using CSS / Javascript.

Maybe bold the selection.

I am open to suggestions. Any help is greatly appreciated.

Thanks

Junaid Inam

1 0

Answer

SELECTED ANSWER

replied on July 25, 2016

You could do this mostly with CSS and a small bit of Javascript. I added CSS class RBChoices to my button group and then added the following CSS:

.RBChoices span.choice{
  display:inline-block;
  border-bottom:3px solid #dddddd;
  background-color:#eeeeee;
  padding:5px 10px;
  text-align:center;
  margin:0px 2px;
}

.RBChoices span.choice.selected{
  border-bottom:3px solid #009999;
  background-color:#009999;
}

.RBChoices .choice label{
  display:block;
  margin:0px;
  font-weight:bold;
  color: #009999;
  min-width: 20px
}

.RBChoices span.choice.selected label{
  color:#eeeeee;
}

.RBChoices input{
  display:none;
}

And a small bit of javascript to add a class "selected" to the span when the interior input element is clicked:

$(document).ready(function(){
  $('.RBChoices').click(function(){
    $(this).find('span.choice').removeClass('selected');
    $(this).find('input:checked').closest('span.choice').addClass('selected');
  });
});

End result looks pretty close to your initial example:

7 0

replied on July 25, 2016

Wow. That's pretty impressive Scott. Thank you.

1 0

Replies

replied on July 25, 2016

Junaid,

How about something like this in the CSS section to make the width a little wider, change the font to bold when selected and change the color to red?

.feelWeekButtons input[type="radio"]{ margin-left:20px;}
input[type=radio]:checked + label {color: red};
input[type=radio]:checked + label {font-weight: bold};

1 0

View 2 previous replies

replied on July 25, 2016

Thanks. Works great except for the bold part, it doesn't seem to be changing for me.

0 0

replied on July 25, 2016

Junaid, then take out the one bold statement and use it this way instead:

input[type="radio"]:checked + label
{
    font-weight: bold;
}

0 0

replied on July 25, 2016

Nope. Still the same.

0 0

replied on July 25, 2016

Hmm, must be a version discrepancy. I have 9.2, and this is the code I'm using:


.feelWeekButtons input[type="radio"]{
    margin-left:20px;
}


input[type=radio]:checked + label{color: red;}

input[type="radio"]:checked + label
{
    font-weight: bold;
}

...and it's giving me this:

0 0

replied on July 25, 2016

Thanks Rick for all your help.

0 0

You are not allowed to follow up in this post.

Sign in to reply to this post.

Asked July 25, 2016
Updated July 25, 2016
3552 views