Xác định kích thước nút radio độc lập với độ phân giải màn hình

Question

Tôi định dạng nút radio html. Tôi muốn nhận được một cái gì đó nhiều hơn hoặc ít hơn như thế này (xin vui lòng bỏ qua kích thước phông chữ nhỏ và aligment)

Tôi đã làm điều này bằng cách thiết lập các thuộc tính css chiều rộng và chiều cao của mỗi nút riêng lẻ. Giống như ví dụ ở đây:

#r_starkeAblehnung.css-checkbox, #r_starkeZustimmung.css-checkbox { 
border: 0px; 
height: 50px; 
width: 50px; 
} 

này hoạt động khi tôi nhìn vào cửa sổ Chrome của tôi với 75% zoom -which là mặc định của tôi cho trang của bạn- này nhưng khi tôi nhìn vào 100% zoom các nút radio quay trở lại tất cả là nhỏ và có kích thước bằng nhau. Họ cũng mất bóng mát mẻ của họ - tôi đoán nó đã làm với một độ phân giải nghèo hơn. Kích thước nút radio vẫn ở đó: các phần tử của tôi chiếm nhiều không gian hơn. Nhưng các nút radio không mở rộng cho phù hợp. Tôi không hiểu chuyện gì đang diễn ra.

Tôi đã thử xác định kích thước nút radio về mặt em, nhưng nó không giúp ích gì.

Ví dụ, xác định ba kích cỡ khác nhau như 1em, 1.5em và 3em dẫn này:

EDIT: jsfiddle, trong đó có hành vi tương tự khi thay đổi zoom trình duyệt

Answer 1

Bạn chỉ nên cân nhắc tạo giao diện/kiểu của riêng mình cho các nút radio. Một cái gì đó như thế này:

input[type=radio] { 
 
    appearance: none; 
 
    -moz-appearance: none; 
 
    -webkit-appearance: none; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 10px; 
 
    outline: none; 
 
    box-shadow: inset 0 0 0 2px #FFF; 
 
    border: 2px solid #CCC; 
 
} 
 
input[type=radio]:checked { 
 
    background-color: #CCC; 
 
}

<input type="radio" name="radio" id="radio1" /> 
 
<label for="radio1">Radio 1</label> 
 
<input type="radio" name="radio" id="radio2" /> 
 
<label for="radio2">Radio 2</label>

Answer 2

Tôi nghĩ lý do các em kích thước không hoạt động là bởi vì bạn havem't xác định kích thước cơ sở cho văn bản của bạn: kích thước em không có gì để xác định như '1' em.

thêm

body { 
     font-size: 14px; 
    } 

nên giữ các kích thước liên tục trên zoom.

Answer 3

Hãy thử vertical-align: middle; nó có thể giúp

$("#questionAnswerRadio").css("display", "block");

#questionAnswerRadio { 
 
    vertical-align: middle; 
 
    padding: 0; 
 
    /*margin-bottom: 60px;*/ 
 
    text-align: center; 
 
    display: none; 
 
    margin: auto; 
 
} 
 
#r_neutral.css-checkbox { 
 
    border: 0px; 
 
    height: 1em; 
 
    width: 1em; 
 
    vertical-align: middle; 
 
    margin: 0; 
 
} 
 
#r_ablehnung.css-checkbox, #r_zustimmung.css-checkbox { 
 
    border: 0px; 
 
    height: 1.5em; 
 
    vertical-align: middle; 
 
    width: 1.5em; 
 
    margin: 0; 
 
} 
 
#r_starkeAblehnung.css-checkbox, #r_starkeZustimmung.css-checkbox { 
 
    border: 0px; 
 
    height: 3em; 
 
    vertical-align: middle; 
 
    width: 3em; 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 
<div id="questionAnswerRadio"> 
 
    <label for="r_starkeAblehnung" class="css-label"> 
 
     <input type="radio" id="r_starkeAblehnung" value="StarkeAblehnung" name="radio" class="css-checkbox"> \t <span>Starke Ablehnung</span> 
 

 
    </label> 
 
    <label for="r_ablehnung" class="css-label"> 
 
     <input type="radio" id="r_ablehnung" value="Ablehnung" name="radio" class="css-checkbox"> \t <span>Ablehnung</span> 
 

 
    </label> 
 
    <label for="r_neutral" class="css-label"> 
 
     <input type="radio" id="r_neutral" value="Neutral" name="radio" class="css-checkbox"> \t <span>Neutral</span> 
 

 
    </label> 
 
    <label for="r_zustimmung" class="css-label"> 
 
     <input type="radio" id="r_zustimmung" value="Zustimmung" name="radio" class="css-checkbox"> \t <span>Zustimmung</span> 
 

 
    </label> 
 
    <label for="r_starkeZustimmung" class="css-label"> 
 
     <input type="radio" id="r_starkeZustimmung" value="StarkeZustimmung" name="radio" class="css-checkbox"> \t <span>Starke Zustimmung</span> 
 

 
    </label> 
 
</div>