tùy chỉnh hộp thả xuống tự động hoàn thành

Question

Tôi đang sử dụng tiện ích jquerys autocomplete nhưng tôi đang gặp một số sự cố khi cố gắng tạo kiểu hộp thả xuống khi bạn tìm kiếm thứ gì đó.

Tôi đang cố gắng di chuyển hộp xuống một chút và thay đổi màu đường viền/bg nhưng một số JS đang thêm vào một số kiểu nhúng được ghi đè kiểu .css của tôi. Nhưng tôi không thể tìm thấy nó.

I'v dựa trên mỏ của tôi tắt this one.

<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem"> 

Answer 1

Để tránh sử dụng !important bạn có thể thêm kiểu của mình bằng jQuery và ghi đè chúng theo cách đó.

$('ul.ui-autocomplete').css({ 
    color: 'red' 
}); 

Một giải pháp khác là xóa thuộc tính kiểu khỏi ul.

$('ul.ui-autocomplete').removeAttr('style'); 

Answer 2

Nếu không nhìn thấy phong cách css của bạn, hoặc theo thứ tự bạn đang tải các tập tin .css, bạn có thể ghi đè lên phong cách bằng cách sử dụng Firebug kiểm tra mà các lớp học được áp dụng, và thêm !important; đến phong cách css chính của bạn.

Ví dụ:

ul.ui-autocomplete { 
color: red !important; 
} 

Cách tốt nhất bạn có thể chiến đấu này là đúng theo dõi nếu jQuery plugin của bạn có bất kỳ thông số để giúp bạn, hoặc dải JS mình và thêm phong cách CSS của riêng bạn.

Điều quan trọng ở trên; quy tắc có thể là một cơn ác mộng, nó là một hack trong một ý nghĩa - nhưng nó có thể làm việc cho bạn.

Answer 3

Cố gắng thêm margin-top và margin-left trong css của bạn

Trọng giá trị top và left là không tốt, bởi vì nó được tính toán liên quan đến lĩnh vực văn bản nó bắt nguồn từ đâu.

Answer 4

Tôi thực sự không phải là chuyên gia trong jquery nhưng tôi có một cái nhìn xung quanh trong ví dụ bạn đã gửi và phong cách của menu là tất cả givent bởi một phong cách menu (jquery.ui.menu.css). Nhìn vào liên kết dưới đây và có một số thông tin có thể giúp bạn tôi nghĩ.

http://docs.jquery.com/UI/Menu#theming

Bạn sẽ có thể tùy biến giao diện và cảm nhận về thả xuống của bạn trong các lớp học.

«Nếu cần có mức tùy chỉnh sâu hơn, có các lớp dành riêng cho tiện ích con được tham chiếu trong các biểu định kiểu jquery.ui.menu.css có thể được sửa đổi.» Từ trang web jquery.

Answer 5

thử sử dụng vị trí hoặc thêm vào tùy chọn ... bạn có thể tham khảo ở đây ...

http://jqueryui.com/demos/autocomplete/#option-position

Answer 6

Kiểm tra các tập tin jquery.ui.theme.css,

lớp .ui-widget-content gần đầu có thể được sử dụng để đặt một màu nền trên kết quả tìm kiếm tự động hoàn hộp, biên giới và vị trí cũng có thể được tinh chỉnh thông qua lớp này .