CSS appearance

admin發表於2019-08-27
CSSAPP

此屬性可以改變指定元素的外觀，比如可以將<p>段落元素渲染為按鈕的外觀。

它還是很有實際意義，很多元素在不同瀏覽器中渲染的效果，用appearance進行一下彌補。

語法結構:

[CSS] 純文字檢視 複製程式碼
appearance: <appearance>;

特別說明：此屬性尚處於試驗階段，瀏覽器支援度很差。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
div{
  width:150px;
  height:30px;
  font-size:12px;
  margin:5px;
  text-align:center;
  line-height:30px;
}
.button{
  -webkit-appearance:button;
  -moz-appearance:button;
}
.listbox{
  -webkit-appearance:listbox;
  -moz-appearance:listbox;
}
.listitem{
  -webkit-appearance:listitem;
  -moz-appearance:listitem;
}
.searchfield{
  -webkit-appearance:searchfield;
  -moz-appearance:searchfield;
}
.textarea{
  -webkit-appearance:textarea;
  -moz-appearance:textarea;
}
.menulist{
  -webkit-appearance:menulist;
  -moz-appearance:menulist;
}
</style>
</head>  
<body>  
<div class="button">螞蟻部落一</div>
<div class="listbox">螞蟻部落二</div>
<div class="listitem">螞蟻部落三</div>
<div class="searchfield">螞蟻部落四</div>
<div class="textarea">螞蟻部落五</div>
<div class="menulist">螞蟻部落六</div>
</body> 
</html>

程式碼演示了屬性的相關用法，當前屬性在各個瀏覽器存在很大相容問題，這裡不是考慮的重點。

常用屬性值羅列:

[CSS] 純文字檢視 複製程式碼
checkbox
radio
push-button
square-button
button
button-bevel
listbox
listitem
menulist
menulist-button
menulist-text
menulist-textfield
scrollbarbutton-up
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbartrack-horizontal
scrollbartrack-vertical
scrollbarthumb-horizontal
scrollbarthumb-vertical
scrollbargripper-horizontal
scrollbargripper-vertical
slider-horizontal
slider-vertical
sliderthumb-horizontal
sliderthumb-vertical
caret
searchfield
searchfield-decoration
searchfield-results-decoration
searchfield-results-button
searchfield-cancel-button
textfield
textarea

關於各個屬性值的具體表現，大家可以自行測試。

相關文章