Tôi muốn thêm phần đệm vào các tùy chọn của thẻ "chọn" html.Làm cách nào để thêm đệm vào danh sách thả xuống html?
Tôi cố thêm nó vào thuộc tính kiểu "chọn" và "tùy chọn" và nó không hoạt động trong IE.
Tôi có thể làm gì?
OK, tôi ghét phải nghe tất cả những năm 1990, nhưng chỉ cần trước và ứng dụng kết thúc một không gian để các văn bản tùy chọn có thể chấp nhận được cho các mục tiêu mong muốn của bạn?
+1 bình chọn: Đây là giải pháp tốt nhất cho rằng OP muốn chỉ thêm một số không gian bên trái và bên phải, và nếu anh ta không muốn dành một vài giờ thực hiện thả xuống tùy chỉnh. –
Xin đừng làm vậy. Điều đó ngăn cản việc chọn các tùy chọn từ danh sách bằng cách gõ. Nó cũng phá vỡ tự động điền. Đây là trở kháng đặc biệt đối với người dùng có yêu cầu trợ năng. –
** Một giải pháp khác hoạt động trên tất cả trình duyệt **, đang thêm ' ' vào tùy chọn đầu tiên trong danh sách chọn [this] (http://stackoverflow.com/questions/25752/how-do-i-put-a -space-character-before-option-text-in-a-html-select-phần tử) và [this] (http://stackoverflow.com/questions/5828697/how-to-retain-spaces-in-dropdownlist- asp-net-mvc-dao cạo-xem), Hy vọng sẽ giúp. – stom
CSS:
option{
padding: 0.5em;
}
Nó không hoạt động trong IE. – Billy
Trình duyệt duy nhất mà Firefox hoạt động. Safari, Chrome và Opera đều không chú ý đến nó. –
Rất khó để tạo kiểu một thả xuống trình duyệt hộp chéo. Để có được bất kỳ loại điều khiển nào, bạn cần phải mã hóa một mã thay thế bằng JavaScript. Được cảnh báo, tuy nhiên:
các công trình sau đây, trong FF3 + và Midori (và các trình duyệt Webkit có lẽ khác):
select
{width: 14em;
margin: 0 1em;
text-indent: 1em;
line-height: 2em;}
select * {width: 14em;
padding: 0 1em;
text-indent: 0;
line-height: 2em;}
chiều rộng là cho phép en ough phòng trong hộp hiển thị select khi không hoạt động, lề làm những gì nó luôn luôn làm, text-indent được sử dụng để giả vờ đệm giữa ranh giới bên trái của hộp chọn và văn bản bên trong. line-height chỉ để cho phép khoảng cách dọc.
Tôi không thể nhận xét về việc sử dụng nó trong IE, tôi sợ, vì vậy nếu có ai có thể nuôi lại thích nghi - phù hợp với điều đó sẽ tốt.
Cần lưu ý rằng phần thả xuống của lựa chọn (select *) không bị ảnh hưởng bên ngoài FF3 đối với tôi, vì bất kỳ lý do gì, vì vậy nếu đó là câu hỏi bạn muốn trả lời, tôi xin lỗi vì không có gì mới.
Demo tại địa chỉ: http://davidrhysthomas.co.uk/so/select-styling.html
Tôi không thể làm điều này để làm việc với đệm hoặc khoảng cách vì một lý do nào đó. Tôi đã đi với một giải pháp jQuery trông như thế này:
$(document).click(function(){
$('#selector option').each(function(){
$(this).html(" "+$(this).text());
});
});
Tạo một lớp cho SELECT
.listBox{
width: 200px;
...etc
}
Bây giờ xác định Css cho các tùy chọn của SELECT
.listBox option{
padding:4px;
...etc
}
Đã thử nghiệm trên IE 10
bạn đang cố gắng làm gì? tại sao bạn muốn pad các tùy chọn chọn? –
Tôi muốn thêm một số không gian vào bên trái và bên phải của các tùy chọn được chọn để làm cho nó trông đẹp hơn. – Billy