Có thể thay đổi chiều cao giữa hai tùy chọn sử dụng css không ?,Thay đổi chiều cao tùy chọn thả xuống - CSS, Javascript
Xem ví dụ minh họa. Chiều cao giữa tiền mặt & Tùy chọn thẻ tín dụng
Vui lòng làm theo hình ảnh.
Note: Am hỗ trợ Chrome chỉ
trọng.
thử
option{
padding:5px 0;
}
Ví dụ này với lớp đệm Jsfiddle
.dis option{
padding:5px 0;
}
html
<select class="dis">
<option>1erwer</option>
<option>2wwerwer</option>
<option>3werwer</option>
<option>4werwer</option>
<option>5wrwer</option>
</select>
tăng khoảng cách giữa hai lựa chọn là không thể
<select class="dis">
<option>1erwer</option>
<option>2wwerwer</option>
<option>3werwer</option>
<option disabled="disabled" ></option> <---trick
<option>3werwer</option>
</select>
Tôi đã thử rằng, nó không hoạt động, kiểm tra trong http://jsfiddle.net/. –
@Niks xin vui lòng lưu fiddle ... fiddle của bạn là trống –
Ngay cả trong fiddle được đề cập của bạn không hoạt động .. đã kiểm tra xem nó .. –
Liệu không ai nhớ optgroup s nữa? Hiếm khi được sử dụng, nhưng dù sao cũng được hỗ trợ trong mọi trình duyệt.
<select>
<optgroup label="Cash">
<option>Cash</option>
</optgroup>
<optgroup label="Other">
<option>Credit Card</option>
<option>Credit Note (R)</option>
<option>Gift Voucher</option>
<option>Cheque</option>
</optgroup>
</select>
Chết tiệt, tôi không nghĩ rằng tôi từng thấy điều này trước đây. Cảm ơn thủ thuật mới (cũ)! – nixkuroi
Tùy chọn khác là bạn có thể thay đổi kích thước phông chữ lớn hơn.
.myOption {
font-size: 20px;
}
Hoạt động rất tốt nếu bạn đang sử dụng các biểu tượng Phông chữ tuyệt vời trong danh sách thả xuống và bạn muốn làm cho chúng lớn hơn. –
Không cụ thể. Bạn không thể kiểm soát kiểu dáng của danh sách tùy chọn. Tuy nhiên, bạn có thể sử dụng một cái gì đó như select2 (https://select2.github.io/examples.html) tạo ra các lựa chọn mặt tiền mà bạn có thể tạo kiểu.
Có .. Hiện có số lượng lib tùy chỉnh có sẵn ngay bây giờ..Nhưng đã tìm kiếm giải pháp cho thả xuống html. –
Tôi nghĩ điều này là không thể khi sử dụng phần tử HTML '
Có thể, tôi đã nhìn thấy nó trước đây. – user1534664
@ user1534664 sau đó tiếp tục và hiển thị cho chúng tôi .. –