Ngoại hình - Thủ thuật CSS

Anonim

Các appearancetài sản được sử dụng để hiển thị một yếu tố sử dụng một phong cách nền tảng tự nhiên dựa trên chủ đề của hệ điều hành của người dùng.

.thing ( -webkit-appearance: value; -moz-appearance: value; appearance: value; )

Điều này đang bắt đầu không được chuẩn bị trước, điều này thật tuyệt vì câu chuyện giữa các trình duyệt ở đây rất phức tạp.

Tài appearancesản được sử dụng vì một trong hai lý do:

  1. Để áp dụng kiểu dành riêng cho nền tảng cho một phần tử không có kiểu đó theo mặc định
  2. Để xóa kiểu dành riêng cho nền tảng đối với một phần tử có kiểu đó theo mặc định

Ví dụ: type=searchtheo mặc định , đầu vào với một trong trình duyệt WebKit có các góc tròn và rất nghiêm ngặt trong những gì bạn có thể thay đổi thông qua CSS. Nếu bạn không muốn kiểu tóc đó, bạn có thể gỡ bỏ nó ngay lập tức.

input(type=search) ( -webkit-appearance: none; )

Hoặc bạn có thể lấy một đầu vào với type = text và chỉ làm cho nó giống như một đầu vào tìm kiếm:

input(type=text) ( -webkit-appearance: searchfield; )

Giá trị WebKit

  • hộp kiểm
  • Đài
  • nút bấm
  • nút vuông
  • cái nút
  • nút-bevel
  • hộp danh sách
  • listitem
  • menulist
  • nút menulist
  • menulist-text
  • menulist-textfield
  • nút cuộn lên
  • nút cuộn xuống
  • nút cuộn sang trái
  • nút cuộn-phải
  • scrollbartrack-ngang
  • scrollbartrack-vertical
  • scrollbarthumb-ngang
  • scrollbarthumb-vertical
  • scrollbargripper-ngang
  • scrollbargripper-vertical
  • thanh trượt ngang
  • thanh trượt dọc
  • sliderthumb-ngang
  • sliderthumb-vertical
  • dấu mũ
  • trường tìm kiếm
  • trang trí trường tìm kiếm
  • trường tìm kiếm-kết quả-trang trí
  • nút tìm kiếm-kết quả
  • trường tìm kiếm-huỷ-nút
  • trương Văn bản
  • textarea

Giá trị Mozilla

  • không ai
  • cái nút
  • hộp kiểm
  • hộp kiểm-container
  • hộp kiểm nhỏ
  • hộp thoại
  • hộp danh sách
  • menuitem
  • menulist
  • nút menulist
  • menulist-textfield
  • menupopup
  • thanh tiến trình
  • Đài
  • đài-container
  • đài nhỏ
  • chỉnh lại
  • thanh cuộn
  • nút cuộn xuống
  • nút cuộn sang trái
  • nút cuộn-phải
  • nút cuộn lên
  • scrollbartrack-ngang
  • scrollbartrack-vertical
  • ngăn cách
  • thanh trạng thái
  • chuyển hướng
  • tab-left-edge Đã lỗi thời
  • bảng tab
  • trương Văn bản
  • textfield-multiline
  • thanh công cụ
  • nút thanh công cụ
  • hộp công cụ
  • -moz-mac-Uniform-toolbar
  • -moz-win-không viền-kính
  • -moz-win-browsertabbar-toolbox
  • -moz-win-Communications-toolbox
  • -moz-win-glass
  • -moz-win-media-toolbox
  • chú giải công cụ
  • treeheadercell
  • cây đầu cây
  • treeitem
  • treetwisty
  • treetwistyopen
  • treeview
  • cửa sổ

Tài nguyên

  • Tài liệu Mozilla cho giao diện -moz
  • Trent Walton trên Giao diện Webkit
  • Shaun Inman khi tắt bóng văn bản bên trong của đầu vào văn bản trên iPad
  • Thông số CSS3

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
83 * 80 Không 83 * TP *

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
88 85 * 81 * 14.0-14.4 *