Hide Dropdown Arrow for Select Input with CSS appearance

We use the appearance property to style an element according to the platform-native style of the user's operating system.

Syntax

The syntax of CSS appearance property is as follows −

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

The following examples illustrate CSS appearance property −

Hide Dropdown Arrow for Input Type Number

In this example, we have shown how to hide the dropdown arrow for the <select>. For that, we gave set the appearance property to none −

input[type=number] {
   width: 40px;
   -moz-appearance: textfield;
}
input[type=number]:hover {
   background-color: #e3f5a1;
}
input::-webkit-inner-spin-button {
   -webkit-appearance: none;
}

Example

Let us see the example −

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

Hide Dropdown Arrow for Select

In this example, we have shown how to hide the dropdown arrow for the <select>. For that, we gave set the appearance property to none −

select {
   width: 20%;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
}

Example

Let us see the example −

<!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>
Updated on: 2023-11-02T12:02:48+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements