Thực đơn
trang chủMicrosoft

Tạo kiểu cho danh sách thả xuống chọn. Thiết kế CSS của lựa chọn - sử dụng thuộc tính giao diện

Rất thường xuyên, các nhà thiết kế vẽ bố cục với các thành phần hình thức không chuẩn, tức là. Thiết kế của hộp kiểm, nút radio, đầu vào và bộ chọn khác với những gì trình duyệt hiển thị theo mặc định. Do đó, người thiết kế bố cục phải đối mặt với nhiệm vụ tùy chỉnh thiết kế, bao gồm các phần tử chọn lọc.

Trong bài này chúng ta sẽ xem xét cách thay đổi vẻ bề ngoài lựa chọn Tuy nhiên, chúng tôi sẽ tuân theo hệ tư tưởng sau. Sẽ hợp lý nếu chỉ tùy chỉnh trạng thái thu gọn mặc định của bộ chọn và thiết kế của danh sách thả xuống phải giữ nguyên tiêu chuẩn. Do đó, giải pháp được mô tả bên dưới sẽ không hiệu quả nếu bạn cần một danh sách thả xuống phức tạp, chẳng hạn như có biểu tượng hoặc hộp kiểm cho mỗi tùy chọn.

Mặt khác, phương pháp này cho phép:

1. Đừng viết mã javascript, sẽ mô phỏng hành vi của bộ chọn. Tất cả logic đều thuộc về trình duyệt. Ngày nay có rất nhiều plugin, nhưng bạn không thường xuyên gặp một plugin có thể xử lý tất cả các trường hợp khó khăn mà người dùng gặp phải khi tương tác với điều khiển này. Một ví dụ về trường hợp cực đoan như vậy sẽ là lựa chọn tự động vị trí danh sách thả xuống (mở xuống hoặc lên).

2. Vì trình duyệt chịu trách nhiệm về hoạt động và thiết kế của danh sách thả xuống nên không cần phải viết bất kỳ giải pháp riêng biệt nào cho thiêt bị di động, điều này sẽ cho phép bạn làm việc thuận tiện với bộ chọn trên các thiết bị cảm ứng có màn hình nhỏ. Bộ chọn gốc tích hợp sẵn tự chấp nhận đúng loại, bởi vì trên nền tảng di động mọi thứ đã được nghĩ ra rồi. Ví dụ, người dùng iOS Khi bạn nhấp vào bộ chọn, họ sẽ không thấy danh sách tùy chỉnh của bạn mà là danh sách quen thuộc tiêu chuẩn. Người dùng sẽ không cần điều chỉnh hành vi của họ đối với trang web cụ thể của bạn; hành vi của họ sẽ giống như trên tất cả các trang web khác. Và điều đó rất thuận tiện cho anh ấy, và vì lý do này mà bạn đã tạo ra trang web này.

Vì vậy, như đã đề cập, thuộc tính CSS3 là đủ để thiết kế vùng chọn.

Thuộc tính chính cho phép bạn thay đổi hình thức của bộ chọn là hình thức. Nó buộc một phần tử trở thành bất cứ thứ gì bạn muốn, ví dụ bạn có thể buộc một div trở thành một nút. Tuy nhiên, theo mục đích của chúng tôi, giá trị thú vị là none , điều đó có nghĩa là phần tử hoàn toàn không cần phải được tạo kiểu. Bằng cách này, chúng ta có thể loại bỏ thuộc tính chọn cụ thể - mũi tên xuống ở bên phải.

Chọn ( -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; Appearance: none !important; )

Như bạn có thể thấy, việc loại bỏ mũi tên không khó, bây giờ tất cả những gì còn lại là thêm một vài thuộc tính CSS tầm thường như khung, phông chữ, v.v. Tất nhiên, ở đây, bạn có thể thêm các góc tròn, bóng, v.v., mọi thứ như nhà thiết kế đã vẽ trong bố cục. Danh sách thả xuống chính vẫn nguyên gốc.

Chọn ( nền: trong suốt; hiển thị: khối; chiều rộng: 100%; đường viền: 1px Solid #a7a7a7; màu: #32353a; font-family: 16/Arial, sans-serif; font-size: 16px; line-height: 1.4 ; độ dày phông chữ: bình thường; phần đệm: 7px 7px 10px; căn chỉnh dọc: trên cùng; -webkit-appearance: none;

Bây giờ tất cả những gì còn lại là thêm một mũi tên hoặc một số biểu tượng khác làm nền. Chúng tôi sẽ sử dụng nền vì các phần tử giả như trước và sau sẽ không hoạt động đối với phần chọn. Vì hiển thị tốt hơn các trang web trên nhiều thiết bị khác nhau với mật độ điểm ảnh khác nhau, tại quy mô khác nhau và như thế. Việc sử dụng biểu tượng SVG là điều phổ biến. Do đó, bằng cách sử dụng bộ mã hóa URL trực tuyến cho SVG, chúng tôi sẽ chuyển đổi biểu tượng thành URI dữ liệu. Điều quan trọng cần nhớ là thẻ SVG phải có thuộc tính xmlns="http://www.w3.org/2000/svg".

Bạn sẽ nhận được kết quả sau.

%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" Height="8" viewBox="0 0 8 8"%3E%3Cpath fill="%23000" điền quy tắc ="evenodd" class="cls-1" d="M8,0L4.141,6.993,0.012,0.156Z"/%3E%3C/svg%3E%0A

Vì mũi tên được sử dụng không chuẩn nên bạn có thể di chuyển nó sang trái hoặc sử dụng bất kỳ hình ảnh nào khác thay vì mũi tên hoặc bạn có thể thực hiện hoàn toàn mà không cần biểu tượng.

Kết nối tập tin CSSở phần đầu:

.. ..

Nếu bạn muốn sử dụng một chủ đề khác, đừng quên sao chép tệp CSS vào thư mục dự án của bạn.

Áp dụng kiểu để chọn

Khi sử dụng EasyDropDown.js, đánh dấu của bạn vẫn rõ ràng và trực quan. Bạn chỉ cần thêm yếu tố bình thường lựa chọn . Bạn cũng có thể tắt phần tử này, gán nhãn và chỉ định phần tử sẽ được chọn theo mặc định.

Để tạo kiểu cho một phần tử, chỉ cần gán lớp thả xuống cho nó. Đây là một ví dụ:

Cài đặt Tùy chọn 1 Tùy chọn 2 Tùy chọn 3 Tùy chọn 4 Tùy chọn 5

Chỉ vậy thôi, bạn không cần bất cứ điều gì khác. Bây giờ phần tử CHỌN của bạn sẽ đẹp hơn.

Nếu ban đầu bạn cần chọn một phần tử, hãy sử dụng thuộc tính đã chọn. TRONG trong trường hợp này Chúng tôi không khuyên bạn nên sử dụng nhãn này vì... Màn hình hiển thị có thể bị biến dạng một chút.

... Lựa chọn 2 ...

Bạn cũng có thể vô hiệu hóa một phần tử bằng cách thêm thuộc tính bị vô hiệu hóa:

...

Chọn một chủ đề

Plugin EasyDropDown.js có 2 chủ đề phong cách: Metro và Flat. Để kết nối chúng, hãy sử dụng thuộc tính thuộc tính dữ liệu HTML5.

Để áp dụng một chủ đề khác, bên trong phần tử SELECT hãy viết data-settings="("wrapperClass://theme-name")" . Tham số tên chủ đề có thể nhận các giá trị sau: metro hoặc flat . Ví dụ:

...

Chú ý! Phát triển hơn nữa và hỗ trợ cho plugin đã bị ngừng do thực tế là nó hiện là một phần của .

Một trong những điều khó chịu nhất (và tôi thậm chí có thể nói là khủng khiếp) trong quá trình phát triển web là bố cục của các biểu mẫu html. Thật không may, nó không tồn tại tiêu chuẩn thống nhất hiển thị các thành phần của biểu mẫu, bất kể trình duyệt và hệ điều hành, cũng như không có cách nào để tùy chỉnh một số thành phần này bằng cách sử dụng các biểu định kiểu xếp tầng.

Không thể cách điệu hoàn toàn các yếu tố sau các dạng html:

  • danh sách thả xuống ;
  • hộp kiểm;
  • công tắc .
  • trường để gửi tập tin.

Như đã rõ trong tiêu đề của bài viết, ở đây chúng ta sẽ chỉ nói về các lựa chọn.

Có nhiều giải pháp được tạo sẵn dưới dạng plugin jQuery để tạo kiểu cho danh sách thả xuống. Nhưng tôi (do thực tế là không có plugin nào phù hợp với tôi vì lý do này hay lý do khác) đã quyết định sáng tạo lại bánh xe của riêng mình và viết plugin của riêng mình mà tôi chia sẻ trong bài viết này.

Tôi muốn chỉ ra ngay rằng plugin này không phù hợp với tất cả mọi người trường hợp có thể xảy ra sử dụng bộ chọn (đọc những nhược điểm).

Trình diễn plugin

Bạn có thể xem ví dụ về kiểu dáng bộ chọn bằng cách sử dụng plugin của tôi. Tôi đã thiết kế chúng mà không sử dụng hình ảnh.

Thuận lợi
  • Khi tắt JavaScript, bộ chọn tiêu chuẩn sẽ được hiển thị.
  • Tập lệnh có kích thước nhỏ, khoảng 4 kilobyte.
  • Hoạt động trong IE6+ và tất cả các trình duyệt máy tính để bàn hiện đại.
  • Hiển thị nội tuyến.
  • Dễ dàng tạo kiểu bằng CSS.
  • Cho phép bạn thiết lập chiều cao tối đađể biết danh sách thả xuống (chiều cao tối đa của thuộc tính CSS).
  • Tự động điều chỉnh độ rộng nếu không được chỉ định.
  • Hỗ trợ cuộn bánh xe chuột.
  • Có “định vị thông minh”, tức là không vượt quá phần hiển thị của trang khi mở danh sách.
  • Có thể “bắt” nhấn phím Tab và chuyển đổi bằng mũi tên trên bàn phím.
  • Hỗ trợ thuộc tính "bị vô hiệu hóa".
  • Nó cũng hoạt động với các lựa chọn được thêm/thay đổi động.
sai sót
  • Không hỗ trợ nhiều thuộc tính, tức là không cho phép chọn nhiều mục (multi-select).
  • Không hỗ trợ nhóm các mục danh sách (thẻ).
  • Không hỗ trợ chuyển đổi bằng phím mũi tên trên bàn phím khi mở danh sách bằng cách click chuột.
Tải xuống

Plugin không có sẵn vì nó không còn phù hợp nữa.

Plugin jQuery “SelectBox Styler”

Phiên bản: 1.0.1 | Số lượt tải xuống: 11103 | Kích thước: 7 KB | Cập nhật cuối cùng: 07.10.2012

Cập nhật 22/09/2012 Đã chuyển đổi tập lệnh thành một plugin (bao gồm cả phiên bản thu nhỏ) đồng thời thêm hỗ trợ để thêm/thay đổi các lựa chọn một cách linh hoạt. 07/10/2012 Đã sửa lỗi hoạt động của tập lệnh khi sử dụng phương thức onchange của thẻ. Kết nối plugin

Nếu jQuery chưa được bật trên trang web, hãy thêm hàng tiếp theo trước thẻ:

Ngay sau jQuery, hãy bao gồm tệp có tập lệnh:

(hàm($) ( $(function() ( $("select").selectbox(); )) ))(jQuery)

Đặt mã này trước thẻ sau các tệp trên.

Tại thay đổi năng động Bộ chọn cần chạy trình kích hoạt làm mới, ví dụ:

(hàm($) ( $(function() ( $("button").click(function() ( $("select").find("option:nth-child(5)").attr("selected ", true); $("select").trigger("refresh"); )) )) ))(jQuery)

Mã HTML sau khi thực thi plugin

Cấu trúc của nó trông như thế này:

-- Lựa chọn --

  • -- Lựa chọn --
  • Đoạn 1
  • Điểm 2
  • Điểm 3
-- Chọn -- Mục 1 Mục 2 Mục 3

Các lớp CSS được sử dụng để tạo kiểu cho bộ chọn

Để đưa ra lựa chọn với sử dụng CSS, sử dụng các lớp sau:

.chọn hộpvùng chứa cha cho toàn bộ vùng chọn
.selectbox .selectchọn ở trạng thái thu gọn
.selectbox.focus .selecttập trung vào chọn khi nhấn Phím Tab
.selectbox .select .textthẻ lồng nhau để thu gọn lựa chọn trong trường hợp chèn hình nền sử dụng kỹ thuật cửa trượt
.selectbox .triggerbên phải của phần chọn thu gọn (công tắc có điều kiện)
.selectbox .trigger .arrowthẻ phụ cho nút radio (mũi tên)
.selectbox .dropdowntrình bao bọc cho danh sách thả xuống
.selectbox .dropdown uldanh sách thả xuống
.selectbox lichọn mục (tùy chọn)
.selectbox li.selectedđã chọn mục đã chọn
.selectbox li.disabledbị vô hiệu hóa (không có sẵn để lựa chọn) chọn mục
Phần kết luận

Tạo một tập lệnh như vậy là một công việc khá khó khăn vì bạn phải tính đến nhiều điểm khác nhau. Tôi thực sự hy vọng rằng sẽ không có lỗi nghiêm trọng nào xuất hiện. Tuy nhiên, nếu có bất cứ điều gì, xin vui lòng cho tôi biết trong phần bình luận.

Với sự ra đời của CSS3, người ta có thể thực hiện được trang phục đẹp cho bất kỳ phần tử nào trên trang web. Bởi vì CSS3 cung cấp nhiều khả năng giúp tăng tốc quá trình phát triển thiết kế trang web. Hôm nay chúng ta sẽ tạo kiểu cho phần tử select trong CSS. Đối với những người chưa biết, phần tử này chịu trách nhiệm về danh sách thả xuống trên trang web. Nhiều người sử dụng chế độ xem chuẩn, nhưng nó có thể được thay đổi cho phù hợp với thiết kế trang web của bạn.

Không có gì tốt hơn là tận mắt nhìn thấy danh sách trông như thế nào:

Tải xuống

Đây là giao diện của phần Chọn này trong CSS:

Các bài viết tương tự về chủ đề này:

Bây giờ tôi sẽ mô tả từng bước quá trình cài đặt bằng cách sử dụng danh sách thả xuống này hoặc chỉ cần chọn.

1 bước. Chúng tôi kết nối các tập tin cần thiết

Nó đơn giản. Sau khi tải xuống kho lưu trữ với các nguồn từ đó, chúng tôi sẽ cần 2 tệp (style.css và select.js - nếu bạn đang kết nối tùy chọn đầu tiên của danh sách hoặc select_demo2.js - nếu bạn đang kết nối tùy chọn thứ hai). Chúng tôi kết nối hai tệp này giữa các thẻ:

1 2
Bước 2. Cấu trúc HTML Chọn phần tử

Không có gì quá phức tạp trong cấu trúc (và tại sao lại phải như vậy, nó chỉ là HTML :)). Mâu đơn giản, bên trong có menu thả xuống Chọn với các mục của nó:

1 2 3 4 5 6 7 8 9 10 11 12 Các quốc gia thuộc Vương quốc Anh: Vui lòng chọn quốc gia: Anh Bắc Ireland Scotland Wales
Bước 3. Thêm kiểu cho Chọn CSS

Không có nhiều người trong số họ. Tôi cung cấp bên dưới các kiểu cho tùy chọn đầu tiên của danh sách. Tôi muốn thu hút sự chú ý của bạn đến các đường dẫn đến hình ảnh. Chỉ có hai trong số đó: cái đầu tiên dùng để mở danh sách, và cái thứ hai dùng để đóng. Chúng trông giống như hai mũi tên “lên” và “xuống”. Chúng có thể được tải xuống từ các nguồn ở đầu bài viết:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 .dropcontainer ( vị trí : tương đối ; cỡ chữ : 16px ; màu : #777 ; ) .trigger ( màu : #777 ; phần đệm : 10px ; cỡ chữ : 16px ; chiều rộng : 50% ; nền : #fff url () 98 % trung tâm không lặp lại ; hiển thị : khối ; đường viền : 1px rắn #ccc ; -webkit-box-sizing : border-box; dễ dàng trong 0,5 giây; chuyển đổi: dễ dàng trong 0,5 giây) .trigger: di chuột ( color: #777; nền: #f5f5f5 url (../images/select-arrow-open.png ) 98% không lặp lại ở giữa ; ). activetrigger ( color : #777 ; phần đệm : 10px ; cỡ chữ : 16px ; chiều rộng : 50% ; nền : #f5f5f5 url () 98% trung tâm không lặp lại ; hiển thị : khối ; viền : 1px rắn #ccc ; -webkit- kích thước hộp : hộp viền; ) .activetrigger :hover ( nền : #f5f5f5 url (../images/select-arrow-close.png ) 98% không lặp lại ở giữa ; màu : #777 ; ) .activetrigger :active ( nền : #f5f5f5 url (../images/select-arrow-close.png ) 98% trung tâm không lặp lại ; màu : #777 ; ) .dropcontainer ul ( font-size : 16px ; border : 1px rắn #ccc ; nền : #fff ; phần đệm : 0 ; chiều rộng : 50% ; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; dropcontainer ul li ( đệm : 5px ; -webkit-transition : dễ dàng tất cả 0,5 giây; -moz-transition : dễ dàng tất cả 0,5 giây; -o-transition : dễ dàng tất cả 0,5 giây; chuyển tiếp : dễ dàng tất cả 0,5 giây ) .dropcontainer ul li : di chuột ( nền : #f5f5f5 ; phác thảo : không có ; ) .dropcontainer ul li :first-child ( display : none ; ) .dropcontainer ul li :last-child ( border-bottom : none ; ) .dropdownhidden ( display : none ; ) .dropdownvisible ( chiều cao : tự động ; )

Trong ví dụ demo, các kiểu được đặt trong thư mục css. Do đó, khi chúng ta đặt đường dẫn đến một thư mục có hình ảnh trong đường dẫn, trước tiên chúng ta viết ".." (hai dấu chấm) để tăng một cấp. Và sau đó vào thư mục hình ảnh.

Bây giờ tôi muốn nói những gì có thể làm để không sao chép hoàn toàn kiểu cho phiên bản thứ hai của danh sách (có chiều cao cố định), mà thay đổi một thuộc tính và có được một danh sách cố định.

Bạn cần thay thế thuộc tính dropdownvisible cuối cùng:

1 2 3 .dropdownvisible ( chiều cao : tự động ; )
1 2 3 4 .dropdownvisible ( chiều cao : 200px ; tràn-y : cuộn ; )

Và nếu bạn không quên thay thế các tập lệnh (xem ở trên những gì cần thay đổi thành gì), bạn sẽ nhận được những điều sau:

Trong trình duyệt nào tính năng Chọn CSS (danh sách thả xuống) này hoạt động tốt?
  • ✓ Firefox 24.0, Firefox 25.0, Firefox 26.0
  • ✓ Chrome 29.0, Chrome 30.0, Chrome 31.0
  • ✓ Opera 12.14, Opera 12.15, Opera 12.16
  • ✓ IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
  • ✓ Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
  • ✓ Apple iOS– iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), Ipad nhỏ
  • ✓ Android – Sony Experia X10, HTC One X, Kindle lửa 2, Google Nexus
Bổ sung vào bài học - hiệu ứng di chuột sáng tạo + VIDEO

Ngoài bài học, tôi muốn mách bạn cách tạo một hiệu ứng khác rất đặc biệt trên trang web: hiệu ứng di chuột. Coi đây nè đoạn video ngắn và bạn sẽ tự mình nhìn thấy mọi thứ.

Phần kết luận

Một thành phần trang web khác, Chọn, có thể được thay đổi cho phù hợp với thiết kế của bạn bằng CSS và Javascript. Không có gì phức tạp trong quá trình cài đặt, vì vậy bạn sẽ thành công. Ngoài ra, như là một bổ sung cho bài viết, bạn nhận được cách sáng tạo và video cài đặt.