Thuộc tính appearance | CSS3

Đị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

Ví dụ

Xem thêm ví dụ

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

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

Link liên quan

animation

backface-visibility