2010-07-20 30 views
6

Tôi cảm thấy như đây là một câu hỏi ngớ ngẩn nhưng tôi luôn thấy rằng việc sửa đổi các thuộc tính CSS nhất định là một rắc rối khi làm việc với jQuery. Giả sử tôi định nghĩa một phần tử như là một đối tượng jQuery-UI (như autocomplete hoặc datepicker), làm cách nào để thay đổi CSS mà không cần phải đi đến trang UI và xây dựng chủ đề của riêng tôi?Cách dễ dàng để ghi đè lên css jQuery-UI cơ bản?

Ví dụ: tôi thấy rằng kích thước phông chữ mặc định của lịch là khá lớn nên tôi thường phải tìm div chứa được tạo bởi jQuery và sau đó thêm font-size: 14px !important; nếu tôi muốn kiểu được áp dụng hoặc cách khác bị đánh bại bởi định nghĩa jQuery (vì nó có nhiều chọn lọc hơn).

Giải pháp làm cho quy tắc của tôi có chọn lọc hơn hay tôi thiếu một điều gì đó thực sự hiển nhiên?

+2

Tôi thông cảm. Tôi thành thật tôn trọng jQuery UI nhưng tôi nghĩ rằng đó là một giải pháp thực sự tồi tệ cho rất nhiều trang web chính xác vì cách bố trí nó áp đặt. Những gì tôi đã làm là chỉ cần lấy CSS họ đã cho tôi và tự do sửa đổi nó. Rất nhiều. Tôi thực sự không muốn trang web của tôi trông giống như một "trang web giao diện người dùng jQuery" anyway, và tôi không có hối tiếc :-) – Pointy

Trả lời

10

Tôi chưa sử dụng giao diện người dùng JQuery, nhưng xem nhanh tài liệu của họ dường như chỉ ra rằng rất nhiều kiểu tạo nên đơn giản để ghi đè. Trang này http://jqueryui.com/docs/Theming/API nói về ví dụ cụ thể của bạn về font-size, cho biết rằng lớp .ui-widget kiểm soát font-size cho một tiện ích cụ thể. Vì vậy, nó có vẻ như cho bạn để có được kích thước phông chữ của bạn, bạn sẽ chỉ cần có một số css mà thực hiện điều này:

#ui-datepicker-div.ui-widget {font-size: 14px} 

Hy vọng rằng sẽ giúp.

+0

Wow liên kết tuyệt vời, cảm ơn! Tôi luôn luôn nhìn vào css mà đi kèm với tải về và nó luôn luôn có vẻ như họ có một bộ chọn dặm dài vì vậy tôi figured nó đã phức tạp hơn nhiều so với điều này :) – Gazillion

+2

Các trang liên kết ở trên đã đi bây giờ (trong 2014), hãy thử tại đây: http://api.jqueryui.com/theming/css-framework/ –

Các vấn đề liên quan