使用 CSS 外观隐藏选择输入的下拉箭头

我们使用外观属性根据用户操作系统的平台原生样式设置元素的样式。

语法

CSS外观属性的语法如下 -

Selector {
   appearance: /*value*/;
   -webkit-appearance: /*value*/; /*for Safari and Chrome */
   -moz-appearance: /*value*/; /*for Firefox */
}

示例

以下示例说明了 CSS 外观属性。

<!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>

这给出了以下输出

示例

<!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>

这给出了以下输出

基础教程