Free Consultation Call

February 17th, 2024
TutorialsWebsite DesignWordPress

10 Unique Comprehensive CSS Styles for Select Inputs in 2024

Customizing <select> inputs with unique styles and arrow designs can significantly elevate the user interface of your web forms. This guide presents 10 different styles, each with a distinct appearance and custom arrow, accompanied by full HTML/CSS code.

10 different styles using pure CSS and HTML for select inputs

1. Dark Mode Elegance Select

Description: Ideal for dark-themed interfaces, featuring a sleek downward arrow for a sophisticated look.

HTML:

<!-- Dark Mode Elegance Select Input -->
<div class="custom-select-container">
    <label for="dark-mode-elegance">Dark Mode Elegance:</label>
    <div class="custom-select dark-mode-elegance">
        <select id="dark-mode-elegance">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </select>
    </div>
</div>

CSS:

/* Dark Mode Elegance Styles */
.custom-select.dark-mode-elegance {
    position: relative;
    background-color: #333;
    border-radius: 5px;
}

.custom-select.dark-mode-elegance select {
    width: 100%;
    padding: 10px;
    color: #fff;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-select.dark-mode-elegance::after {
    content: '▼';
    color: white;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

2. Light & Airy

Description: A fresh, light-themed design with a delicate arrow, perfect for minimalist layouts.

HTML:

<!-- Light & Airy Select Input -->
<div class="custom-select-container">
    <label for="light-airy">Light & Airy:</label>
    <div class="custom-select light-airy">
        <select id="light-airy">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </select>
    </div>
</div>

CSS:

/* Light & Airy Styles */
.custom-select.light-airy {
    position: relative;
    background-color: #f8f8f8;
    border-radius: 5px;
}

.custom-select.light-airy select {
    width: 100%;
    padding: 10px;
    color: #333;
    border: 1px solid #ddd;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-select.light-airy::after {
    content: '▼';
    color: #333;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

3. Bold & Vibrant

Description: A striking design with bold colors and a standout arrow, suited for dynamic interfaces.

HTML:

<!-- Bold & Vibrant Select Input -->
<div class="custom-select-container">
    <label for="bold-vibrant">Bold & Vibrant:</label>
    <div class="custom-select bold-vibrant">
        <select id="bold-vibrant">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </select>
    </div>
</div>

CSS:

/* Bold & Vibrant Styles */
.custom-select.bold-vibrant {
    position: relative;
    background-color: #ff6347;
    border-radius: 5px;
}

.custom-select.bold-vibrant select {
    width: 100%;
    padding: 10px;
    color: white;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-select.bold-vibrant::after {
    content: '▼';
    color: white;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

4. Elegant Minimalist

Description: A sleek, minimalist design with a subtle arrow, perfect for modern interfaces.

HTML:

<!-- Elegant Minimalist Select Input -->
<div class="custom-arrow elegant-minimalist">
    <label for="elegant-minimalist">Elegant Minimalist:</label>
    <select id="elegant-minimalist">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>

CSS:

.custom-arrow.elegant-minimalist {
    position: relative;
    background-color: #fff;
    border: 2px solid #000;
}
.custom-arrow.elegant-minimalist select {
    color: #000;
    padding-right: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.custom-arrow.elegant-minimalist::after {
    content: '▼';
    color: #000;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

5. Nature Lover

Description: Inspired by nature, this style uses earth tones and a leaf-shaped arrow.

HTML:

<!-- Nature Lover Select Input -->
<div class="custom-arrow nature-lover">
    <label for="nature-lover">Nature Lover:</label>
    <select id="nature-lover">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>

CSS:

.custom-arrow.nature-lover {
    position: relative;
    background-color: #8fbc8f; /* Dark Sea Green */
    border: 1px solid #2e8b57; /* Sea Green */
}
.custom-arrow.nature-lover select {
    color: #2e8b57;
    padding-right: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.custom-arrow.nature-lover::after {
    content: '🍃'; /* Leaf emoji as arrow */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    pointer-events: none;
}

6. Neon Glow

Description: A vibrant, neon-themed select input with a contrasting arrow.

HTML:

<!-- Neon Glow Select Input -->
<div class="custom-arrow neon-glow">
    <label for="neon-glow">Neon Glow:</label>
    <select id="neon-glow">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>

CSS:

.custom-arrow.neon-glow {
    position: relative;
    background-color: #000;
    border: 1px solid #39ff14; /* Neon green */
}
.custom-arrow.neon-glow select {
    color: #39ff14; /* Neon green */
    padding-right: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.custom-arrow.neon-glow::after {
    content: '▼';
    color: #39ff14; /* Neon green */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

7. Ocean Breeze

Description: Reflecting the calmness of the ocean, this style features a wave-shaped arrow.

HTML:

<!-- Ocean Breeze Select Input -->
<div class="custom-arrow ocean-breeze">
    <label for="ocean-breeze">Ocean Breeze:</label>
    <select id="ocean-breeze">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>

CSS:

.custom-arrow.ocean-breeze {
    position: relative;
    background-color: #00bfff; /* Deep Sky Blue */
    border: 1px solid #0000cd; /* Medium Blue */
}
.custom-arrow.ocean-breeze select {
    color: #0000cd; /* Medium Blue */
    padding-right: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.custom-arrow.ocean-breeze::after {
    content: '🌊'; /* Wave emoji as arrow */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    pointer-events: none;
}

8. Tech Savvy

Description: A high-tech themed design with a digital arrow, perfect for tech-oriented sites.

HTML:

<!-- Tech Savvy Select Input -->
<div class="custom-arrow tech-savvy">
    <label for="tech-savvy">Tech Savvy:</label>
    <select id="tech-savvy">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>

CSS:

.custom-arrow.tech-savvy {
    position: relative;
    background-color: #2c3e50; /* Asbestos color */
    border: 1px solid #7f8c8d; /* Concrete color */
}
.custom-arrow.tech-savvy select {
    color: #7f8c8d; /* Concrete color */
    padding-right: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.custom-arrow.tech-savvy::after {
    content: '⬇️'; /* Downward arrow emoji */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

9. Playful Pop

Description: A fun and playful style with a colorful arrow, great for informal or creative websites.

HTML:

<!-- Playful Pop Select Input -->
<div class="custom-arrow playful-pop">
    <label for="playful-pop">Playful Pop:</label>
    <select id="playful-pop">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>

CSS:

<!-- Elegant Simplicity Select Input -->
<div class="custom-arrow elegant-simplicity">
    <label for="elegant-simplicity">Elegant Simplicity:</label>
    <select id="elegant-simplicity">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>

10. Elegant Simplicity

Description: A refined and simple design with a subtle arrow, ideal for elegant and upscale websites.

HTML:

<!-- Elegant Simplicity Select Input -->
<div class="custom-arrow elegant-simplicity">
    <label for="elegant-simplicity">Elegant Simplicity:</label>
    <select id="elegant-simplicity">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>

CSS:

.custom-arrow.elegant-simplicity {
    position: relative;
    background-color: #f2f2f2;
    border: 1px solid #bfbfbf;
}
.custom-arrow.elegant-simplicity select {
    color: #555;
    padding-right: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.custom-arrow.elegant-simplicity::after {
    content: '▼';
    color: #555;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

Common Arrow Code (for all above) For Select Inputs:

.custom-arrow select {
  width: 100%;
  padding: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 4px;
  font-size: 16px;
}
.custom-arrow::after {
  content: "▼";
  position: absolute;
  right: 10px;
  top: 50%;
  /*             transform: translateY(-50%); */
  pointer-events: none;
}

These 10 unique select input styles with custom arrows offer a wide range of design possibilities, each tailored to fit different themes and aesthetics of websites. Experiment with these examples to find the perfect match for your site’s design.

https://codepen.io/webconsultant247/pen/vYPeJVX

Learn more about select input and its attributes here: http s://developer.mozilla.org/en-US/docs/Web/HTML/Element/select