Syntax error Hide Dropdown Arrow for Select Input with CSS appearance

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