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