Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Hide Dropdown Arrow for Select Input with CSS appearance
The CSS appearance property controls how form elements are displayed by removing or applying platform-native styling. It's commonly used to hide dropdown arrows in select elements and number input spinners for custom styling.
Syntax
selector {
appearance: value;
-webkit-appearance: value; /* Safari and Chrome */
-moz-appearance: value; /* Firefox */
}
Possible Values
| Value | Description |
|---|---|
none |
Removes all platform-native styling |
auto |
Default browser styling (default value) |
textfield |
Styles element as a plain text field |
Example 1: Hide Dropdown Arrow for Select Element
The following example shows how to hide the dropdown arrow for a select element by setting appearance to none −
<!DOCTYPE html>
<html>
<head>
<style>
.custom-select {
width: 200px;
padding: 10px;
border: 2px solid #ddd;
border-radius: 5px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: #f9f9f9;
font-size: 16px;
}
</style>
</head>
<body>
<h3>Select with Hidden Dropdown Arrow</h3>
<select class="custom-select">
<option value="" selected disabled>Choose a color</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>
</body>
</html>
A select dropdown appears without the default arrow, styled with a gray border and light background. The dropdown still functions when clicked but has a clean, custom appearance.
Example 2: Hide Number Input Spin Buttons
This example demonstrates hiding the spin buttons (up/down arrows) from number input fields −
<!DOCTYPE html>
<html>
<head>
<style>
.no-spinner {
width: 150px;
padding: 8px;
border: 2px solid #4CAF50;
border-radius: 4px;
font-size: 16px;
-moz-appearance: textfield;
}
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.no-spinner:hover {
background-color: #e8f5e8;
}
</style>
</head>
<body>
<h3>Number Input Without Spin Buttons</h3>
<input type="number" class="no-spinner" value="42" min="0" max="100">
<p>Type a number or use arrow keys to change the value.</p>
</body>
</html>
A number input field appears without the typical spin buttons (up/down arrows). On hover, it shows a light green background. Users can still input numbers via keyboard.
Browser Support
The appearance property requires vendor prefixes for full browser support. Modern browsers support the unprefixed version, but legacy support still requires -webkit- and -moz- prefixes.
Conclusion
The appearance: none property is essential for creating custom-styled form elements by removing default browser styling. Always include vendor prefixes for maximum browser compatibility.
2K+ Views
