Đăng bài

Thuộc tính appearance trong CSS3

Duy Năm
Duy Năm

4 năm trước in CSS3

Thuộc tính appearance trong CSS3

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ạigiá trịVí dụMô tả
iconiconappearance: 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).
windowdesktopappearance: 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.
workspaceappearance: 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.
documentappearance: document;Một cửa sổ được sử dụng để đại diện cho văn bản người dùng.
tooltipappearance: 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.
dialogappearance: 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.
buttonbuttonappearance: button;Hiển thị một nút nhấn.
push-buttonappearance: 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-bevelappearance: 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-buttonappearance: 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.
hyperlinkappearance: 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.
radioappearance: 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.
checkboxappearance: 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-itemappearance: 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).
tabappearance: tab;Một nút nhấn đại diện cho các thẻ tab.
menumenubarappearance: menubar;Một trình đơn (menu) được sắp xếp nằm ngang.
pull-down-menuappearance: 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-menuappearance: 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
listboxappearance: 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.
listitemappearance: listitem;Một danh sách các tùy chọn cho người dùng chọn.
menulistappearance: menulist;Một danh sách các tùy chọn cho người dùng chọn.
menulist-buttonappearance: menulist-button;Một danh sách các tùy chọn với các mục là button.
menulist-textappearance: menulist-button;Một danh sách các tùy chọn với các mục là text.
menulist-textfieldappearance: 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-groupappearance: 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-groupappearance: checkbox-group;Một trình đơn nơi các tùy chọn được hiển thị như một checkbox.
scrollbarbutton-upappearance: scrollbarbutton-up;Hiển thị một nút nhấn hướng lên như trong thanh scroll.
scrollbarbutton-downappearance: scrollbarbutton-down;Hiển thị một nút nhấn hướng xuống như trong thanh scroll.
scrollbarbutton-leftappearance: scrollbarbutton-left;Hiển thị một nút nhấn hướng sang trái như trong thanh scroll.
scrollbarbutton-rightappearance: scrollbarbutton-right;Hiển thị một nút nhấn hướng sang phải như trong thanh scroll.
scrollbartrack-horizontalappearance: scrollbartrack-horizontal;Hiển thị thanh scroll nằm ngang.
scrollbartrack-verticalappearance: scrollbartrack-vertical;Hiển thị thanh scroll nằm thẳng đứng.
scrollbarthumb-horizontalappearance: scrollbarthumb-horizontal;Hiển thị thumb (nút kéo) của thanh scroll nằm ngang.
scrollbarthumb-verticalappearance: scrollbarthumb-vertical;Hiển thị thumb (nút kéo) của thanh scroll nằm thẳng đứng.
scrollbargripper-horizontalappearance: scrollbarthumb-horizontal;Hiển thị gripper của thanh scroll nằm ngang.
scrollbargripper-verticalappearance: scrollbarthumb-vertical;Hiển thị gripper của thanh scroll nằm thẳng đứng.
slider-horizontalappearance: slider-horizontal;Hiển thị thanh trượt nằm ngang.
slider-verticalappearance: slider-vertical;Hiển thị thanh trượt nằm thẳng đứng.
sliderthumb-horizontalappearance: sliderthumb-horizontal;Hiển thị thumb (nút kéo) của thanh trượt nằm ngang.
sliderthumb-verticalappearance: sliderthumb-vertical;Hiển thị thumb (nút kéo) của thanh trượt nằm thẳng đứng.
caretappearance: caret;
searchfieldappearance: searchfield;Hiển thị một vùng nhập dữ liệu tìm kiếm.
searchfield-decorationappearance: searchfield-decoration;Hiển thị một vùng nhập dữ liệu tìm kiếm có thể trang trí.
searchfield-results-decorationappearance: searchfield-results-decoration;Hiển thị một nút nhấn được trang trí sẵn.
searchfield-results-buttonappearance: searchfield-results-button;Hiển thị nút nhấn, được hiểu là một button.
searchfield-cancel-buttonappearance: searchfield-cancel-button;Hiển một nút hủy lệnh tìm kiếm.
textfieldappearance: textfield;Hiển một trường nhập text.
textareaappearance: textarea;Hiển một khu vực nhập text.
outline-treeappearance: 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ừ.
rangeappearance: 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.
fieldcombo-boxappearance: 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).
signatureappearance: signature;Một trường cho nhập chữ ký.
passwordappearance: password;Một trường cho nhập password

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>Button của HỌC TV</p>
</body>
</html>

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

Button của HỌC TV


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 TV

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 PCSmartphone - Tablets
Internet ExplorerFirefoxOperaChromeSafariIOSAndroidWindow phone
buttonX14
-moz-		X20
-webkit-		5.1
-webkit-		3.2
-webkit-		2.1
-webkit-		X
push-buttonXX
X20
-webkit-		5.1
-webkit-		3.2
-webkit-		2.1
-webkit-		X
button-bevelXXX20
-webkit-		XX2.1
-webkit-		X
square-buttonXXX20
-webkit-		5.1
-webkit-		3.2
-webkit-		2.1
-webkit-		X
hyperlinkX14
-moz-		12
-o-		20
-webkit-		5.1
-webkit-		3.2
-webkit-		2.1
-webkit-		X
radio-buttonX14
-moz-		X20
-webkit-		5.1
-webkit-		3.2
-webkit-		2.1
-webkit-		X
checkboxX14
-moz-		X20
-webkit-		5.1
-webkit-		3.2
-webkit-		2.1
-webkit-		X
menu-itemXXXXXXXX
tabX14
-moz-		XXXXXX
menubarXXXXXXXX
pull-down-menuXXXXXXXX
pop-up-menuXXXXXXXX
listboxX14
-moz-		X20
-webkit-		5.1
-webkit-		3.2
-webkit-		2.1
-webkit-		X
listitemXXXXXXXX
menulistX14
-moz-		X20
-webkit-		5.1
-webkit-		3.2
-webkit-		2.1
-webkit-		X
menulist-buttonX14
-moz-		X20
-webkit-		5.1
-webkit-		3.2
-webkit-		2.1
-webkit-		X
menulist-textXXXXXXXX
menulist-textfieldX14
-moz-		XXXXXX
radio-groupXXXXXXXX
checkbox-groupXXXXXXXX
scrollbarbutton-upX14
-moz-		XXXXXX
scrollbarbutton-downX14
-moz-		XXXXXX
scrollbarbutton-leftX14
-moz-		XXXXXX
scrollbarbutton-rightX14
-moz-		XXXXXX
scrollbartrack-horizontalX14
-moz-		XXXXXX
scrollbartrack-verticalX14
-moz-		XXXXXX
scrollbarthumb-horizontalX14
-moz-		XXXXXX
scrollbarthumb-verticalX14
-moz-		XXXXXX
scrollbargripper-horizontalXXXXXXXX
scrollbargripper-verticalXXXXXXXX
slider-horizontalXXX20
-webkit-		5.1
-webkit-		3.2
-webkit-		2.1
-webkit-		X
slider-verticalXXX20
-webkit-		5.1
-webkit-		3.2
-webkit-		2.1
-webkit-		X
sliderthumb-horizontalXXX20
-webkit-		XX2.1
-webkit-		X
sliderthumb-verticalXXX20
-webkit-		XX2.1
-webkit-		X
caretX14
-moz-		X20
-webkit-		5.1
-webkit-		3.2
-webkit-		2.1
-webkit-		X
searchfieldXXX20
-webkit-		5.1
-webkit-		3.2
-webkit-		2.1
-webkit-		X
searchfield-decorationXXXXXXXX
searchfield-results-decorationXXXX5.1
-webkit-		3.2
-webkit-		XX
searchfield-results-buttonXXXX5.1
-webkit-		3.2
-webkit-		XX
searchfield-cancel-buttonXXXX5.1
-webkit-		3.2
-webkit-		XX
textfieldX14
-moz-		X20
-webkit-		5.1
-webkit-		3.2
-webkit-		2.1
-webkit-		X
textareaXXX20
-webkit-		5.1
-webkit-		3.2
-webkit-		2.1
-webkit-		X
outline-treeXXXXXXXX
rangeXXXXXXXX
combo-boxXXXXXXXX
signatureXXXXXXXX
passwordXXXXXXXX
Duy Năm

Bình luận

Mục lục bài viết

Thuộc tính CSS & CSS3

hoc.tv ads

Copyright © Howto.vn. Thiết kế web bởi Sonic Team
Quảng cáo với chúng tôi Phản hồi