CSS3 appearance 属性

appearance 属性用于指定用户界面元素（如按钮、复选框等）的外观样式。该属性通常用于重置浏览器默认样式，使得界面元素在不同浏览器中具有一致的外观。

语法

element {
  appearance: value;
}

• element：要应用样式的元素。
• value：指定元素的外观样式，可以是以下值之一：
  • none：表示元素不显示任何标准用户界面样式。
  • button：表示元素显示为标准按钮样式。
  • checkbox：表示元素显示为标准复选框样式。
  • radio：表示元素显示为标准单选框样式。
  • searchfield：表示元素显示为标准搜索框样式。
  • slider：表示元素显示为标准滑块样式。

示例

// www.javascriptcn.com code example
button {
  appearance: button;
}

input[type="checkbox"] {
  appearance: checkbox;
}

input[type="radio"] {
  appearance: radio;
}

input[type="search"] {
  appearance: searchfield;
}

input[type="range"] {
  appearance: slider;
}

在上面的示例中，我们分别为按钮、复选框、单选框、搜索框和滑块指定了不同的外观样式，使得它们在不同浏览器中显示一致。

以上就是 appearance 属性的介绍，通过使用该属性，我们可以轻松地定制用户界面元素的外观样式，提升用户体验。