Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to remove input background on select in CSS

HTML CSS Web Development Front End Technology

The default styling for HTML form elements can often be somewhat dull and uninspiring. One element that is often in need of a design overhaul is the select input, which is used to present users with a list of options to choose from. In this article, we will show you how to remove the default background of the select input using CSS.

By doing so, you will be able to customize the appearance of your select inputs and make them more visually appealing and in line with the overall design of your website or application.

Syntax

select {
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* For focus states */
select:focus {
    background: transparent;
    outline: none;
}

Understanding Input States

Before removing backgrounds, it's important to understand input states. Input fields have different states like focused (when user interacts) and unfocused (default state). CSS provides pseudo-classes like :focus and :active to target these states.

Method 1: Using Background None

The following example shows a basic select element with default styling 

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        padding: 20px;
        font-family: Arial, sans-serif;
    }
    
    label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
    }
    
    select {
        padding: 10px;
        border: 2px solid #ccc;
        border-radius: 4px;
    }
</style>
</head>
<body>
    <div class="container">
        <label for="movies">Choose a movie:</label>
        <select name="movies" id="movies">
            <option value="action">Action Movie</option>
            <option value="comedy">Comedy Movie</option>
            <option value="drama">Drama Movie</option>
            <option value="horror">Horror Movie</option>
        </select>
    </div>
</body>
</html>

A select dropdown with default gray background styling appears with movie options.

Method 2: Removing Background with Webkit Appearance

The following example removes the background using background: none and -webkit-appearance: none 

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        padding: 20px;
        font-family: Arial, sans-serif;
    }
    
    label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
    }
    
    .custom-select {
        padding: 10px;
        border: 2px solid #007bff;
        border-radius: 4px;
        background: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
    }
    
    .custom-select:focus {
        background: transparent;
        outline: none;
        border-color: #0056b3;
    }
</style>
</head>
<body>
    <div class="container">
        <label for="movies">Choose a movie:</label>
        <select name="movies" id="movies" class="custom-select">
            <option value="action">Action Movie</option>
            <option value="comedy">Comedy Movie</option>
            <option value="drama">Drama Movie</option>
            <option value="horror">Horror Movie</option>
        </select>
    </div>
</body>
</html>

A select dropdown with transparent background and blue border appears. The default arrow indicator is removed, giving a clean, custom appearance.

Method 3: Complete Form with Background Removal

The following example shows multiple form inputs with background removal applied consistently 

<!DOCTYPE html>
<html>
<head>
<style>
    .form-container {
        max-width: 400px;
        margin: 20px;
        padding: 20px;
        font-family: Arial, sans-serif;
        background-color: #f9f9f9;
        border-radius: 8px;
    }
    
    .form-control {
        width: 100%;
        padding: 12px;
        margin: 8px 0 16px 0;
        border: 2px solid #ddd;
        border-radius: 4px;
        background: transparent;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        box-sizing: border-box;
    }
    
    .form-control:focus {
        background: transparent;
        outline: none;
        border-color: #007bff;
    }
    
    label {
        display: block;
        font-weight: bold;
        color: #333;
    }
</style>
</head>
<body>
    <div class="form-container">
        <form>
            <label for="name">Your Name:</label>
            <input type="text" id="name" class="form-control" placeholder="Enter your name">
            
            <label for="email">Your Email:</label>
            <input type="email" id="email" class="form-control" placeholder="Enter your email">
            
            <label for="movies">Choose a movie:</label>
            <select id="movies" class="form-control">
                <option value="">Select a movie</option>
                <option value="action">Action Movie</option>
                <option value="comedy">Comedy Movie</option>
                <option value="drama">Drama Movie</option>
            </select>
        </form>
    </div>
</body>
</html>

A complete form with text inputs and select dropdown appears in a light gray container. All form elements have transparent backgrounds with consistent styling and blue focus borders.

Key Properties

Property Description
background: none Removes all background styling
background: transparent Sets background to fully transparent
-webkit-appearance: none Removes default webkit styling
appearance: none Standard property to remove default appearance

Conclusion

Removing input backgrounds in CSS is achieved using background: none or background: transparent combined with appearance: none. This technique works for both focus states and default states, allowing you to create custom-styled form elements that match your design requirements.

Updated on: 2026-03-15T15:49:47+05:30

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements