Ví dụ về Ví dụ về thuộc tính

Ví dụ về thuộc tính với giá trị button

Ví dụ về thuộc tính với giá trị button : Hiển thị một nút nhấn.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>button</p>
</body>
</html>

CSS viết:

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

button

Ví dụ về thuộc tính với giá trị push-button

Ví dụ về thuộc tính với giá trị 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.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>push-button</p>
</body>
</html>

CSS viết:

p {
    appearance: push-button;	
    -webkit-appearance: push-button;
    -moz-appearance: push-button;
    -ms-appearance: push-button;
    -o-appearance: push-button;
}

push-button

Ví dụ về thuộc tính với giá trị button-bevel

Ví dụ về thuộc tính với giá trị button-bevel : 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.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>button-bevel</p>
</body>
</html>

CSS viết:

p {
    appearance: button-bevel;	
    -webkit-appearance: button-bevel;
    -moz-appearance: button-bevel;
    -ms-appearance: button-bevel;
    -o-appearance: button-bevel;
}

button-bevel

Ví dụ về thuộc tính với giá trị square-button

Ví dụ về thuộc tính với giá trị square-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.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>square-button</p>
</body>
</html>

CSS viết:

p {
    appearance: square-button;	
    -webkit-appearance: square-button;
    -moz-appearance: square-button;
    -ms-appearance: square-button;
    -o-appearance: square-button;
}

square-button

Ví dụ về thuộc tính với giá trị hyperlink

Ví dụ về thuộc tính với giá trị 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.

Ta có thể sử dụng một button như một hyperlink.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p><button>hyperlink</button></p>
</body>
</html>

CSS viết:

p button {
    appearance: hyperlink;	
    -webkit-appearance: hyperlink;
    -moz-appearance: hyperlink;
    -ms-appearance: hyperlink;
    -o-appearance: hyperlink;
}

Ví dụ về thuộc tính với giá trị radio-button

Ví dụ về thuộc tính với giá trị radio-button : 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.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p><a>&nbsp;</a>radio-button</p>
</body>
</html>

CSS viết:

p a {
    appearance: radio;	
    -webkit-appearance: radio;
    -moz-appearance: radio;
    -ms-appearance: radio;
    -o-appearance: radio;
}

radio-button

Ví dụ về thuộc tính với giá trị checkbox

Ví dụ về thuộc tính với giá trị checkbox : 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.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p><a>&nbsp;</a>checkbox</p>
</body>
</html>

CSS viết:

p {
    appearance: checkbox;	
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    -ms-appearance: checkbox;
    -o-appearance: checkbox;
}

checkbox

Ví dụ về thuộc tính với giá trị menu-item

Ví dụ về thuộc tính với giá trị 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).

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>menu-item</p>
</body>
</html>

CSS viết:

p {
    appearance: menu-item;	
    -webkit-appearance: menu-item;
    -moz-appearance: menu-item;
    -ms-appearance: menu-item;
    -o-appearance: menu-item;
}

menu-item

Ví dụ về thuộc tính với giá trị tab

Ví dụ về thuộc tính với giá trị tab : Một nút nhấn đại diện cho các thẻ tab.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>Tab 01</p>
<p>Tab 02</p>
</body>
</html>

CSS viết:

p {
    display: inline;
    appearance: tab;	
    -webkit-appearance: tab;
    -moz-appearance: tab;
    -ms-appearance: tab;
    -o-appearance: tab;
}

Tab 01

Tab 02

Ví dụ về thuộc tính với giá trị menubar

Ví dụ về thuộc tính với giá trị menubar : Một trình đơn (menu) được sắp xếp nằm ngang.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>menubar</p>
</body>
</html>

CSS viết:

p {
    appearance: menubar;	
    -webkit-appearance: menubar;
    -moz-appearance: menubar;
    -ms-appearance: menubar;
    -o-appearance: menubar;
}

menubar

Ví dụ về thuộc tính với giá trị pull-down-menu

Ví dụ về thuộc tính với giá trị pull-down-menu : 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).

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>pull-down-menu</p>
</body>
</html>

CSS viết:

p {
    appearance: pull-down-menu;	
    -webkit-appearance: pull-down-menu;
    -moz-appearance: pull-down-menu;
    -ms-appearance: pull-down-menu;
    -o-appearance: pull-down-menu;
}

pull-down-menu

Ví dụ về thuộc tính với giá trị pop-up-menu

Ví dụ về thuộc tính với giá trị 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.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>pop-up-menu</p>
</body>
</html>

CSS viết:

p {
    appearance: pop-up-menu;	
    -webkit-appearance: pop-up-menu;
    -moz-appearance: pop-up-menu;
    -ms-appearance: pop-up-menu;
    -o-appearance: pop-up-menu;
}

pop-up-menu

Ví dụ về thuộc tính với giá trị listbox

Ví dụ về thuộc tính với giá trị 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.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>listbox</p>
</body>
</html>

CSS viết:

p {
    appearance: listbox;	
    -webkit-appearance: listbox;
    -moz-appearance: listbox;
    -ms-appearance: listbox;
    -o-appearance: listbox;
}

listbox

Ví dụ về thuộc tính với giá trị listitem

Ví dụ về thuộc tính với giá trị listitem : Một danh sách các tùy chọn cho người dùng chọn.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>listitem</p>
</body>
</html>

CSS viết:

p {
    appearance: listitem;
    -webkit-appearance: listitem;
    -moz-appearance: listitem;
    -ms-appearance: listitem;
    -o-appearance: listitem;
}

listitem

Ví dụ về thuộc tính với giá trị menulist

Ví dụ về thuộc tính với giá trị menulist : Một danh sách các tùy chọn cho người dùng chọn.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>menulist</p>
</body>
</html>

CSS viết:

p {
    appearance: menulist;	
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    -ms-appearance: menulist;
    -o-appearance: menulist;
}

menulist

Ví dụ về thuộc tính với giá trị menulist-button

Ví dụ về thuộc tính với giá trị menulist-button : Một danh sách các tùy chọn với các mục là button.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>menulist-button</p>
</body>
</html>

CSS viết:

p {
    appearance: menulist-button;	
    -webkit-appearance: menulist-button;
    -moz-appearance: menulist-button;
    -ms-appearance: menulist-button;
    -o-appearance: menulist-button;
}

menulist-button

Ví dụ về thuộc tính với giá trị menulist-text

Ví dụ về thuộc tính với giá trị menulist-text : Một danh sách các tùy chọn với các mục là text.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>menulist-text</p>
</body>
</html>

CSS viết:

p {
    appearance: menulist-text;	
    -webkit-appearance: menulist-text;
    -moz-appearance: menulist-text;
    -ms-appearance: menulist-text;
    -o-appearance: menulist-text;
}

menulist-text

Ví dụ về thuộc tính với giá trị menulist-textfield

Ví dụ về thuộc tính với giá trị menulist-textfield : Một danh sách các tùy chọn với các mục là text.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>menulist-textfield</p>
</body>
</html>

CSS viết:

p {
    appearance: menulist-textfield;	
    -webkit-appearance: menulist-textfield;
    -moz-appearance: menulist-textfield;
    -ms-appearance: menulist-textfield;
    -o-appearance: menulist-textfield;
}

menulist-textfield

Ví dụ về thuộc tính với giá trị radio-group

Ví dụ về thuộc tính với giá trị radio-group : Một trình đơn nơi các tùy chọn được hiển thị như một radio button.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>radio-group</p>
</body>
</html>

CSS viết:

p {
    appearance: radio-group;	
    -webkit-appearance: radio-group;
    -moz-appearance: radio-group;
    -ms-appearance: radio-group;
    -o-appearance: radio-group;
}

radio-group

Ví dụ về thuộc tính với giá trị checkbox-group

Ví dụ về thuộc tính với giá trị checkbox-group : Một trình đơn nơi các tùy chọn được hiển thị như một checkbox.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>checkbox-group</p>
</body>
</html>

CSS viết:

p {
    appearance: checkbox-group;	
    -webkit-appearance: checkbox-group;
    -moz-appearance: checkbox-group;
    -ms-appearance: checkbox-group;
    -o-appearance: checkbox-group;
}

checkbox-group

Ví dụ về thuộc tính với giá trị scrollbarbutton-up

Ví dụ về thuộc tính với giá trị scrollbarbutton-up : Hiển thị một nút nhấn hướng lên như trong thanh scroll.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p> nbsp;</p>
</body>
</html>

CSS viết:

p {
    appearance: scrollbarbutton-up;	
    -webkit-appearance: scrollbarbutton-up;
    -moz-appearance: scrollbarbutton-up;
    -ms-appearance: scrollbarbutton-up;
    -o-appearance: scrollbarbutton-up;
}

Ví dụ về thuộc tính với giá trị scrollbarbutton-down

Ví dụ về thuộc tính với giá trị scrollbarbutton-down : Hiển thị một nút nhấn hướng xuống như trong thanh scroll.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>&nbsp;</p>
</body>
</html>

CSS viết:

p {
    appearance: scrollbarbutton-down;	
    -webkit-appearance: scrollbarbutton-down;
    -moz-appearance: scrollbarbutton-down;
    -ms-appearance: scrollbarbutton-down;
    -o-appearance: scrollbarbutton-down;
}

Ví dụ về thuộc tính với giá trị scrollbarbutton-left

Ví dụ về thuộc tính với giá trị scrollbarbutton-left : Hiển thị một nút nhấn hướng sang trái như trong thanh scroll.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>&nbsp;</p>
</body>
</html>

CSS viết:

p {
    appearance: scrollbarbutton-left;	
    -webkit-appearance: scrollbarbutton-left;
    -moz-appearance: scrollbarbutton-left;
    -ms-appearance: scrollbarbutton-left;
    -o-appearance: scrollbarbutton-left;
}

Ví dụ về thuộc tính với giá trị scrollbarbutton-right

Ví dụ về thuộc tính với giá trị scrollbarbutton-right : Hiển thị một nút nhấn hướng sang phải như trong thanh scroll.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>&nbsp;</p>
</body>
</html>

CSS viết:

p {
    appearance: scrollbarbutton-right;	
    -webkit-appearance: scrollbarbutton-right;
    -moz-appearance: scrollbarbutton-right;
    -ms-appearance: scrollbarbutton-right;
    -o-appearance: scrollbarbutton-right;
}

Ví dụ về thuộc tính với giá trị scrollbartrack-horizontal

Ví dụ về thuộc tính với giá trị scrollbartrack-horizontal : Hiển thị một nút nhấn hướng sang phải như trong thanh scroll.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>&nbsp;</p>
</body>
</html>

CSS viết:

p {
    appearance: scrollbartrack-horizontal;	
    -webkit-appearance: scrollbartrack-horizontal;
    -moz-appearance: scrollbartrack-horizontal;
    -ms-appearance: scrollbartrack-horizontal;
    -o-appearance: scrollbartrack-horizontal;
}

Ví dụ về thuộc tính với giá trị scrollbartrack-vertical

Ví dụ về thuộc tính với giá trị scrollbartrack-vertical : Hiển thị một nút nhấn hướng sang phải như trong thanh scroll.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>&nbsp;</p>
</body>
</html>

CSS viết:

p {
    height: 100px;
    width: 20px;
    appearance: scrollbartrack-vertical;	
    -webkit-appearance: scrollbartrack-vertical;
    -moz-appearance: scrollbartrack-vertical;
    -ms-appearance: scrollbartrack-vertical;
    -o-appearance: scrollbartrack-vertical;
}

Ví dụ về thuộc tính với giá trị scrollbarthumb-horizontal

Ví dụ về thuộc tính với giá trị scrollbarthumb-horizontal : Hiển thị thumb (nút kéo) của thanh scroll nằm ngang.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>&nbsp;</p>
</body>
</html>

CSS viết:

p {
    appearance: scrollbarthumb-horizontal;	
    -webkit-appearance: scrollbarthumb-horizontal;
    -moz-appearance: scrollbarthumb-horizontal;
    -ms-appearance: scrollbarthumb-horizontal;
    -o-appearance: scrollbarthumb-horizontal;
}

Ví dụ về thuộc tính với giá trị scrollbarthumb-vertical

Ví dụ về thuộc tính với giá trị scrollbarthumb-vertical : Hiển thị thumb (nút kéo) của thanh scroll nằm thẳng đứng.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>&nbsp;</p>
</body>
</html>

CSS viết:

p {
    appearance: scrollbarthumb-vertical;	
    -webkit-appearance: scrollbarthumb-vertical;
    -moz-appearance: scrollbarthumb-vertical;
    -ms-appearance: scrollbarthumb-vertical;
    -o-appearance: scrollbarthumb-vertical;
}

Ví dụ về thuộc tính với giá trị scrollbargripper-horizontal

Ví dụ về thuộc tính với giá trị scrollbargripper-horizontal : Hiển thị gripper của thanh scroll nằm ngang.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>scrollbargripper-horizontal</p>
</body>
</html>

CSS viết:

p {
    appearance: scrollbargripper-horizontal;	
    -webkit-appearance: scrollbargripper-horizontal;
    -moz-appearance: scrollbargripper-horizontal;
    -ms-appearance: scrollbargripper-horizontal;
    -o-appearance: scrollbargripper-horizontal;
}

scrollbargripper-horizontal

Ví dụ về thuộc tính với giá trị scrollbargripper-vertical

Ví dụ về thuộc tính với giá trị scrollbargripper-vertical : Hiển thị gripper của thanh scroll nằm thẳng đứng.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>scrollbargripper-vertical</p>
</body>
</html>

CSS viết:

p {
    appearance: scrollbargripper-vertical;	
    -webkit-appearance: scrollbargripper-vertical;
    -moz-appearance: scrollbargripper-vertical;
    -ms-appearance: scrollbargripper-vertical;
    -o-appearance: scrollbargripper-vertical;
}

scrollbargripper-vertical

Ví dụ về thuộc tính với giá trị slider-horizontal

Ví dụ về thuộc tính với giá trị slider-horizontal : Hiển thị thanh trượt nằm ngang.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>&nbsp;</p>
</body>
</html>

CSS viết:

p {
    appearance: slider-horizontal;	
    -webkit-appearance: slider-horizontal;
    -moz-appearance: slider-horizontal;
    -ms-appearance: slider-horizontal;
    -o-appearance: slider-horizontal;
}

Ví dụ về thuộc tính với giá trị slider-vertical

Ví dụ về thuộc tính với giá trị slider-vertical : Hiển thị thanh trượt nằm thẳng đứng.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>&nbsp;</p>
</body>
</html>

CSS viết:

p {
    height: 100px;
    appearance: slider-vertical;	
    -webkit-appearance: slider-vertical;
    -moz-appearance: slider-vertical;
    -ms-appearance: slider-vertical;
    -o-appearance: slider-vertical;
}

Ví dụ về thuộc tính với giá trị sliderthumb-horizontal

Ví dụ về thuộc tính với giá trị sliderthumb-horizontal : Hiển thị thumb (nút kéo) của thanh trượt nằm ngang.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>&nbsp;</p>
</body>
</html>

CSS viết:

p {
    appearance: sliderthumb-horizontal;	
    -webkit-appearance: sliderthumb-horizontal;
    -moz-appearance: sliderthumb-horizontal;
    -ms-appearance: sliderthumb-horizontal;
    -o-appearance: sliderthumb-horizontal;
}

Ví dụ về thuộc tính với giá trị sliderthumb-vertical

Ví dụ về thuộc tính với giá trị sliderthumb-vertical : Hiển thị thumb (nút kéo) của thanh trượt nằm thẳng đứng.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>&nbsp;</p>
</body>
</html>

CSS viết:

p {
    appearance: sliderthumb-vertical;	
    -webkit-appearance: sliderthumb-vertical;
    -moz-appearance: sliderthumb-vertical;
    -ms-appearance: sliderthumb-vertical;
    -o-appearance: sliderthumb-vertical;
}

Ví dụ về thuộc tính với giá trị caret

Ví dụ về thuộc tính với giá trị caret.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>caret</p>
</body>
</html>

CSS viết:

p {
    appearance: caret;	
    -webkit-appearance: caret;
    -moz-appearance: caret;
    -ms-appearance: caret;
    -o-appearance: caret;
}

caret

Ví dụ về thuộc tính với giá trị searchfield

Ví dụ về thuộc tính với giá trị searchfield : Hiển thị một vùng nhập dữ liệu tìm kiếm.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>&nbsp;</p>
</body>
</html>

CSS viết:

p {
    appearance: searchfield;	
    -webkit-appearance: searchfield;
    -moz-appearance: searchfield;
    -ms-appearance: searchfield;
    -o-appearance: searchfield;
}

Ví dụ về thuộc tính với giá trị searchfield-decoration

Ví dụ về thuộc tính với giá trị searchfield-decoration : Hiển thị một vùng nhập dữ liệu tìm kiếm có thể trang trí.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>&nbsp;</p>
</body>
</html>

CSS viết:

p {
    appearance: searchfield-decoration;	
    -webkit-appearance: searchfield-decoration;
    -moz-appearance: searchfield-decoration;
    -ms-appearance: searchfield-decoration;
    -o-appearance: searchfield-decoration;
}

Ví dụ về thuộc tính với giá trị searchfield-results-decoration

Ví dụ về thuộc tính với giá trị searchfield-results-decoration : Hiển thị một nút nhấn được trang trí sẵn.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>&nbsp;</p>
</body>
</html>

CSS viết:

p {
    appearance: searchfield-results-decoration;	
    -webkit-appearance: searchfield-results-decoration;
    -moz-appearance: searchfield-results-decoration;
    -ms-appearance: searchfield-results-decoration;
    -o-appearance: searchfield-results-decoration;
}

Ví dụ về thuộc tính với giá trị searchfield-results-button

Ví dụ về thuộc tính với giá trị searchfield-results-button : Hiển thị nút nhấn, được hiểu là một button.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>&nbsp;</p>
</body>
</html>

CSS viết:

p {
    appearance: searchfield-results-button;	
    -webkit-appearance: searchfield-results-button;
    -moz-appearance: searchfield-results-button;
    -ms-appearance: searchfield-results-button;
    -o-appearance: searchfield-results-button;
}

Ví dụ về thuộc tính với giá trị searchfield-cancel-button

Ví dụ về thuộc tính với giá trị searchfield-cancel-button : Hiển một nút hủy lệnh tìm kiếm.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>&nbsp;</p>
</body>
</html>

CSS viết:

p {
    appearance: searchfield-cancel-button;	
    -webkit-appearance: searchfield-cancel-button;
    -moz-appearance: searchfield-cancel-button;
    -ms-appearance: searchfield-cancel-button;
    -o-appearance: searchfield-cancel-button;
}

Ví dụ về thuộc tính với giá trị textfield

Ví dụ về thuộc tính với giá trị textfield : Hiển một trường nhập text.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>textfield</p>
</body>
</html>

CSS viết:

p {
    appearance: textfield;	
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    -ms-appearance: textfield;
    -o-appearance: textfield;
}

textfield

Ví dụ về thuộc tính với giá trị textarea

Ví dụ về thuộc tính với giá trị textarea : Hiển một khu vực nhập text.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>textarea</p>
</body>
</html>

CSS viết:

p {
    appearance: textarea;	
    -webkit-appearance: textarea;
    -moz-appearance: textarea;
    -ms-appearance: textarea;
    -o-appearance: textarea;
}

textarea

Ví dụ về thuộc tính với giá trị outline-tree

Ví dụ về thuộc tính với giá trị 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ừ.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>Outline tree</p>
</body>
</html>

CSS viết:

p {
    appearance: outline-tree;	
    -webkit-appearance: outline-tree;
    -moz-appearance: outline-tree;
    -ms-appearance: outline-tree;
    -o-appearance: outline-tree;
}

Outline tree

Ví dụ về thuộc tính với giá trị range

Ví dụ về thuộc tính với giá trị 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.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>range</p>
</body>
</html>

CSS viết:

p {
    appearance: range;	
    -webkit-appearance: range;
    -moz-appearance: range;
    -ms-appearance: range;
    -o-appearance: range;
}

Range

Ví dụ về thuộc tính với giá trị combo-box

Ví dụ về thuộc tính với giá trị range : 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).

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>combo-box</p>
</body>
</html>

CSS viết:

p {
    appearance: combo-box;	
    -webkit-appearance: combo-box;
    -moz-appearance: combo-box;
    -ms-appearance: combo-box;
    -o-appearance: combo-box;
}

combo-box

Ví dụ về thuộc tính với giá trị signature

Ví dụ về thuộc tính với giá trị signature : Một trường cho nhập chữ ký.

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>signature</p>
</body>
</html>

CSS viết:

p {
    appearance: signature;	
    -webkit-appearance: signature;
    -moz-appearance: signature;
    -ms-appearance: signature;
    -o-appearance: signature;
}

signature

Ví dụ về thuộc tính với giá trị password

Ví dụ về thuộc tính với giá trị range : Một trường cho nhập password

Hiện nay chỉ có một số ít trình duyệt hỗ trợ cho giá trị này, click xem trình duyệt hỗ trợ.

HTML viết:

<html>
<head>
</head>

<body>
<p>password</p>
</body>
</html>

CSS viết:

p {
    appearance: password;	
    -webkit-appearance: password;
    -moz-appearance: password;
    -ms-appearance: password;
    -o-appearance: password;
}

password

Ví dụ về thuộc tính appearance

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết:

CSS viết:

HTML viết: