資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究使用 CSS 的外觀隱藏選擇輸入的下拉箭頭
我們使用 appearance 屬性根據使用者作業系統的平臺原生樣式對元素進行樣式化。
語法
CSS 外觀屬性的語法如下 −
Selector {
appearance: /*value*/;
-webkit-appearance: /*value*/; /*for Safari and Chrome */
-moz-appearance: /*value*/; /*for Firefox */
}
以下示例說明了 CSS 的外觀屬性 −
隱藏輸入型別數字的下拉箭頭
在此示例中，我們展示瞭如何隱藏 <select> 的下拉箭頭。為此，我們將外觀屬性設定為 none −
input[type=number] {
width: 40px;
-moz-appearance: textfield;
}
input[type=number]:hover {
background-color: #e3f5a1;
}
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
示例
請看示例 −
<!DOCTYPE html>
<html>
<head>
<style>
input[type=number] {
width: 40px;
-moz-appearance: textfield;
}
input[type=number]:hover {
background-color: #e3f5a1;
}
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
</style>
</head>
<body>
<p>Type/Scroll to change value</p>
<input type="number" value="6">
</body>
</html>
隱藏選擇的下拉箭頭
在此示例中，我們展示瞭如何隱藏 <select> 的下拉箭頭。為此，我們將外觀屬性設定為 none −
select {
width: 20%;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
示例
請看示例 −
<!DOCTYPE html>
<html>
<head>
<style>
select {
width: 20%;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
</style>
</head>
<body>
Hiding dropdown arrow<br/><br/>
<select>
<option value="none" selected disabled hidden>
Select color
</option>
<option>Red</option>
<option>Blue</option>
<option>Green</option>
<option>Yellow</option>
<option>Orange</option>
</select>
</body>
</html>
更新於: 2023 年 11 月 2 日
2 千次觀看
廣告