2012-04-16 10 views
6

Tôi biết các hộp chọn là một chút đau với phong cách với css, nhưng không cần đến các kỹ thuật nâng cao thì tôi có thể thêm một số đệm để đẩy văn bản xuống một chút mà không cần thêm đệm vào mũi tên ở phía bên tay phải?Đệm trong các hộp chọn

+0

thể bạn có thể thử thay đổi padding trên các yếu tố 'tùy chọn' lồng nhau? Chỉ là một ý nghĩ ... –

+0

Không, không có. Tạo kiểu trên các hộp chọn là như bạn đã đề cập đến một cơn đau. Có rất nhiều plugin jQuery cho các hộp chọn có sẵn cho chính lý do này. Kiểu dáng trình duyệt chéo có sẵn của hộp danh sách rất hạn chế. –

+0

Đây không phải là những gì bạn đang hy vọng? http://jsfiddle.net/LpvDg/ – Wasbazi

Trả lời

0

Thú vị kiểm tra ở đây http://cssdeck.com/labs/styling-select-box-with-css3

Tác giả bao phủ vào mũi tên ở phía bên tay phải và tạo riêng của mình, sử dụng nhà cung cấp tiền tố css để nhắm mục tiêu các trình duyệt khác nhau. sau khi làm điều đó, padding của bạn là tất cả miễn phí.

+0

ok .. tôi xứng đáng với những downvotes đó. nó không phải mã của tôi. điều thú vị của nó, và nó * là * một giải pháp css thuần túy sẽ hoạt động trong 90% các trường hợp. – commonpike

12

thêm thứ này vào lớp CSS của bạn. Có lẽ điều này sẽ giúp?

-webkit-appearance:none; 
-moz-appearance:none; 
appearance:none; 
+1

nó đang ẩn các mũi tên mặc dù .. – romainm

4

Kể từ select hộp xuất hiện khác nhau trên các trình duyệt khác nhau và hệ thống đặc biệt là hoạt động, bạn không thể đảm bảo tính nhất quán.

Ví dụ, số lượng tối thiểu của các định dạng tôi có thể làm trên mac là thế này:

select { height:40px; background:transparent; } 

Và nó trông như thế này:

Select Box

+0

vì vậy bạn có bất cứ đề nghị? –

+0

Tôi muốn giới thiệu một hộp chọn tùy chỉnh, ví dụ: https://jqueryui.com/selectmenu/ – redolent