- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>
Advertisements