Teach with us

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 */
}

Example

The following examples illustrate CSS appearance property.

 Live Demo

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

This gives the following output

Example

 Live Demo

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

This gives the following output

Updated on 10-Feb-2021 12:52:27

0 Views