Thuộc tính appearance

Định nghĩa và sử dụng

Thuộc tính appearance định dạng cho thành phần trông như giao diện chuẩn gần với người dùng.

Những giao diện chuẩn đó như là: button, một menu, một trường nhập input (field), một icon hay một cửa sổ (window).

Cấu trúc

tag {
appearance: giá trị;
-moz-appearance: giá trị;
-webkit-appearance: giá trị;
-ms-appearance: giá trị;
-o-appearance: giá trị;
}

Trong đó:

  • -moz-appearance hỗ trợ cho firefox.
  • -webkit-appearance hỗ trợ cho Google Chrome và Safari.
  • -ms-appearance hỗ trợ cho Internet Explorer.
  • -o-appearance hỗ trợ cho Opera.

Thuộc tính của appearance trong css3:

Hiện tại thuộc tính appearance vẫn còn đang thảo luận để đưa ra các giá trị chuẩn cho người dùng, các giá trị sau đây có thể tham khảo:

Loại giá trị Ví dụ Mô tả
icon icon appearance: icon; Định dạng cho thành phần trông như một icon thường có đi kèm tên (name) hoặc nhãn (label).
window desktop appearance: desktop; Một cửa sổ được sử dụng để đại diện cho một hệ thống, thường dùng để chứa các cửa sổ khác.
workspace appearance: workspace; Một cửa sổ được sử dụng để đại diện cho một dự án hay một ứng dụng, thường chứa các cửa sổ khác.
document appearance: document; Một cửa sổ được sử dụng để đại diện cho văn bản người dùng.
tooltip appearance: tooltip; Một cửa sổ được sử dụng để hiển thị thông tin, một hướng dẫn hoặc hiển thị trợ giúp.
dialog appearance: dialog; Một cửa sổ được sử dụng để trình bày một thông báo hoặc lựa chọn thay thế cho người sử dụng.
button button appearance: button; Hiển thị một nút nhấn.
push-button appearance: push-button; Hiển thị một nút nhấn có đường viền xung quanh, hình ảnh như 3 chiều, nhô lên.
button-bevel appearance: button-bevel; Hiển thị một nút nhấn góc nhọn có đường viền xung quanh, hình ảnh như 3 chiều, nhô lên.
square-button appearance: square-button; Hiển thị một nút nhấn hình vuông có đường viền xung quanh, hình ảnh như 3 chiều, nhô lên.
hyperlink appearance: hyperlink; Một nút nhấn đại diện cho một siêu liên kết, thường là đoạn text đơn giản có gạch dưới hoặc có màu sắc khác màu mặc định.
radio appearance: radio; Hiển thị là một vòng tròn nhỏ được lựa chọ hoặc không, kế nó là một nhãn, ta có thể sử dụng CSS để điều khiển hình dạng.
checkbox appearance: checkbox; Hiển thị là một hình vuông có thể click chọn, kế nó là một nhãn, ta có thể sử dụng CSS để điều khiển hình dạng.
menu-item appearance: menu-item; Hiển thị một lựa chọn trong một trình đơn (menu), cũng có thể hoạt động như một nhãn cho một trình đơn lồng bên trong (menu con).
tab appearance: tab; Một nút nhấn đại diện cho các thẻ tab.
menu menubar appearance: menubar; Một trình đơn (menu) được sắp xếp nằm ngang.
pull-down-menu appearance: pull-down-menu; Một trình đơn (menu) có thể hiển thị nhiều nội dung hoặc ít nội dung tùy vào việc điều khiển của người dùng.
pop-up-menu appearance: pop-up-menu; Một trình đơn (menu) có thể ẩn hiện tùy thuộc vào việc điều khiển của người dùng
listbox appearance: listbox; Một danh sách các tùy chọn như một box (không thanh scroll) cho người dùng chọn.
listitem appearance: listitem; Một danh sách các tùy chọn cho người dùng chọn.
menulist appearance: menulist; Một danh sách các tùy chọn cho người dùng chọn.
menulist-button appearance: menulist-button; Một danh sách các tùy chọn với các mục là button.
menulist-text appearance: menulist-button; Một danh sách các tùy chọn với các mục là text.
menulist-textfield appearance: menulist-textfield; Một danh sách các tùy chọn với các mục là một trường text.
radio-group appearance: radio-group; Một trình đơn nơi các tùy chọn được hiển thị như một radio button.
checkbox-group appearance: checkbox-group; Một trình đơn nơi các tùy chọn được hiển thị như một checkbox.
scrollbarbutton-up appearance: scrollbarbutton-up; Hiển thị một nút nhấn hướng lên như trong thanh scroll.
scrollbarbutton-down appearance: scrollbarbutton-down; Hiển thị một nút nhấn hướng xuống như trong thanh scroll.
scrollbarbutton-left appearance: scrollbarbutton-left; Hiển thị một nút nhấn hướng sang trái như trong thanh scroll.
scrollbarbutton-right appearance: scrollbarbutton-right; Hiển thị một nút nhấn hướng sang phải như trong thanh scroll.
scrollbartrack-horizontal appearance: scrollbartrack-horizontal; Hiển thị thanh scroll nằm ngang.
scrollbartrack-vertical appearance: scrollbartrack-vertical; Hiển thị thanh scroll nằm thẳng đứng.
scrollbarthumb-horizontal appearance: scrollbarthumb-horizontal; Hiển thị thumb (nút kéo) của thanh scroll nằm ngang.
scrollbarthumb-vertical appearance: scrollbarthumb-vertical; Hiển thị thumb (nút kéo) của thanh scroll nằm thẳng đứng.
scrollbargripper-horizontal appearance: scrollbarthumb-horizontal; Hiển thị gripper của thanh scroll nằm ngang.
scrollbargripper-vertical appearance: scrollbarthumb-vertical; Hiển thị gripper của thanh scroll nằm thẳng đứng.
slider-horizontal appearance: slider-horizontal; Hiển thị thanh trượt nằm ngang.
slider-vertical appearance: slider-vertical; Hiển thị thanh trượt nằm thẳng đứng.
sliderthumb-horizontal appearance: sliderthumb-horizontal; Hiển thị thumb (nút kéo) của thanh trượt nằm ngang.
sliderthumb-vertical appearance: sliderthumb-vertical; Hiển thị thumb (nút kéo) của thanh trượt nằm thẳng đứng.
caret appearance: caret;
searchfield appearance: searchfield; Hiển thị một vùng nhập dữ liệu tìm kiếm.
searchfield-decoration appearance: searchfield-decoration; Hiển thị một vùng nhập dữ liệu tìm kiếm có thể trang trí.
searchfield-results-decoration appearance: searchfield-results-decoration; Hiển thị một nút nhấn được trang trí sẵn.
searchfield-results-button appearance: searchfield-results-button; Hiển thị nút nhấn, được hiểu là một button.
searchfield-cancel-button appearance: searchfield-cancel-button; Hiển một nút hủy lệnh tìm kiếm.
textfield appearance: textfield; Hiển một trường nhập text.
textarea appearance: textarea; Hiển một khu vực nhập text.
outline-tree appearance: outline-tree; Một menu nơi các tùy chọn có thể được hiển thị hoặc ẩn với các vật dụng nhỏ, thường được đại diện bởi một hình tam giác nhỏ hoặc dấu cộng và trừ.
range appearance: range; Một điều khiển hiển thị một tùy chọn hiện hành, có thể kéo thả, hoặc bật tắc.
field combo-box appearance: combo-box; Một trường được đi kèm với một trình đơn có giá trị sẵn, người dùng có thể chọn lựa dễ dàng (tương tự seclect - option).
signature appearance: signature; Một trường cho nhập chữ ký.
password appearance: password; Một trường cho nhập password

HTML viết:

<html>
<head></head>
<body>
<p>Button của HỌC WEB CHUẨN</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

Button của HỌC WEB CHUẨN

CSS viết:

p {
appearance: button;
-moz-appearance: button;
-webkit-appearance: button;
}

Hiển thị trình duyệt khi có CSS:

Button của HỌC WEB CHUẨN

Trình duyệt và hệ điều hành hỗ trợ

Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho các giá trị của thuộc tính appearance:

  Trình duyệt PC Smartphone - Tablets
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
button X 14
-moz-
X 20
-webkit-
5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
X
push-button X X
X 20
-webkit-
5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
X
button-bevel X X X 20
-webkit-
X X 2.1
-webkit-
X
square-button X X X 20
-webkit-
5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
X
hyperlink X 14
-moz-
12
-o-
20
-webkit-
5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
X
radio-button X 14
-moz-
X 20
-webkit-
5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
X
checkbox X 14
-moz-
X 20
-webkit-
5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
X
menu-item X X X X X X X X
tab X 14
-moz-
X X X X X X
menubar X X X X X X X X
pull-down-menu X X X X X X X X
pop-up-menu X X X X X X X X
listbox X 14
-moz-
X 20
-webkit-
5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
X
listitem X X X X X X X X
menulist X 14
-moz-
X 20
-webkit-
5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
X
menulist-button X 14
-moz-
X 20
-webkit-
5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
X
menulist-text X X X X X X X X
menulist-textfield X 14
-moz-
X X X X X X
radio-group X X X X X X X X
checkbox-group X X X X X X X X
scrollbarbutton-up X 14
-moz-
X X X X X X
scrollbarbutton-down X 14
-moz-
X X X X X X
scrollbarbutton-left X 14
-moz-
X X X X X X
scrollbarbutton-right X 14
-moz-
X X X X X X
scrollbartrack-horizontal X 14
-moz-
X X X X X X
scrollbartrack-vertical X 14
-moz-
X X X X X X
scrollbarthumb-horizontal X 14
-moz-
X X X X X X
scrollbarthumb-vertical X 14
-moz-
X X X X X X
scrollbargripper-horizontal X X X X X X X X
scrollbargripper-vertical X X X X X X X X
slider-horizontal X X X 20
-webkit-
5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
X
slider-vertical X X X 20
-webkit-
5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
X
sliderthumb-horizontal X X X 20
-webkit-
X X 2.1
-webkit-
X
sliderthumb-vertical X X X 20
-webkit-
X X 2.1
-webkit-
X
caret X 14
-moz-
X 20
-webkit-
5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
X
searchfield X X X 20
-webkit-
5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
X
searchfield-decoration X X X X X X X X
searchfield-results-decoration X X X X 5.1
-webkit-
3.2
-webkit-
X X
searchfield-results-button X X X X 5.1
-webkit-
3.2
-webkit-
X X
searchfield-cancel-button X X X X 5.1
-webkit-
3.2
-webkit-
X X
textfield X 14
-moz-
X 20
-webkit-
5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
X
textarea X X X 20
-webkit-
5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
X
outline-tree X X X X X X X X
range X X X X X X X X
combo-box X X X X X X X X
signature X X X X X X X X
password X X X X X X X X

THÔNG BÁO LỖI