간단한 양식의 라디오 버튼 사용자 정의

Question

지금은 필드의 라디오 버튼과 함께 Simple Form을 사용하고 있습니다. 버튼은 내 UI가 작기 때문에 CSS를 통해 버튼을 사용자 정의하고 싶습니다. 버튼을 어떻게 더 크게 만들 수 있습니까? .scss에 무엇을 추가해야합니까? 내가 한 번도 안 써봤

<label for="user_shirtsize_large"> 
 
    <input type="radio" value="Large" name="user[shirtsize]" id="user_shirtsize_large"> 
 
    <label class="collection_radio_buttons" for="user_shirtsize_large">Large</label> 
 
</label>

Answer 1

이 : 여기

은 간단한 양식 포함 된 라디오 버튼의 필드입니다 :이 사람은 각 라디오 버튼에 대한

<%= f.collection_radio_buttons :shirtsize, [['XXL'], ['XL'], ['Large'] , ['Medium'], ['Small']], :first, :last %> 

HTML 출력입니다 . 이제 CSS 선택기에서 살펴 보자 : http://www.w3schools.com/css/css_attribute_selectors.asp 지금

,의 모든 입력 유형 = "라디오"를 선택하고 높이와 폭을 설정할 수 있습니다 :의

input[type="radio"] { //select all input type = "radio" 
    height: 100px; //change these to get correct size 
    width: 100px; 
}