数据结构
网络
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 千次观看
广告