0

I'm trying to do this and have got the code mostly working, except for the fact that it only ever selects one button, and won't allow selection of the other button...

The code is:

.radio-toolbar
        %label{:for => "test_year_group_1"} AS
        %input#test_year_group_1{:name => "test[year_group]", :type => "radio", :value => "1"}
        %label{:for => "test_year_group_2"} A2
        %input#test_year_group_2{:name => "test[year_group]", :type => "radio", :value => "2"}

and the css:

.radio-toolbar input[type="radio"] {
  display: none;
  margin: 10px;
}

.radio-toolbar label {
  display: inline-block;
  background-color: transparent;
  border-style: solid;
  border-radius: 8px;
  border-width: 1px;
  border-color: white;
  padding: 8px 60px;
  color: white;
  margin-left: 20px;
  margin-right: 20px;
}

.radio-toolbar input[type="radio"]:checked + label {
  background-color: white;
  color: gray;
}

But it only ever selects the A2 button, even when I click on the AS button...does anyone know why?

Community
  • 1
  • 1
camillavk
  • 521
  • 5
  • 20
  • Will you create fiddle for it? – ketan Mar 16 '15 at 10:58
  • 1
    `.radio-toolbar input[type="radio"]:checked + label` expects the label to be after checkbox, you have label first and then the checkbox. So what happens is when you select `AS` its sibling label is given the style which is A2's – anpsmn Mar 16 '15 at 11:04

1 Answers1

0

As you are using input type to "radio" then it will allow selection of only one button. If you want multiple selection then you can use checkboxes.

Pranali Maske
  • 132
  • 8
  • Read this from the Question `But it only ever selects the A2 button, even when I click on the AS button...does anyone know why?`. – Venkata Krishna Mar 16 '15 at 11:12