How to style a <select> dropdown with CSS only without JavaScript

PROBLEM

Is there a CSS-only way to style a <select>dropdown?
We need to style a <select>form without any JavaScript. What are the properties we can use to do in CSS?

SOLUTION 1:

<select> tags can be styled through CSS just like any other HTML element on an HTML page rendered in a browser. Below is an example that will position a select element on the page and render the text of the options in blue.

Example HTML file:

html code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Select Styling</title>
  <link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="cherry">Cherry</option>
</select>
</body>
</html>

[ad type=”banner”]

Example CSS file:

css code

/* All select elements on page */
select 
{
  position: relative;
}

/* Style by class. Effects the text of the contained options. */
.blueText 
{
  color: #0000FF;
}

/* Style by id. Effects position of the select drop down. */
#styledSelect 
{
  left: 100px;
}

SOLUTION 2:

You may style any HTML element by its tag name:

css code

select 
{
  font-weight: bold;
}

you can also use a CSS class to style, like any other element:

html code

<select class="important">
  <option>Important Option</option>
  <option>Another Important Option</option>
</select>

<style type="text/css">
  .important 
{
    font-weight: bold;
}
</style>

SOLUTION 3:

Styling Select Box with CSS3:

HTML:

html code

<label>
    <select>
        <option selected> Select Box </option>
        <option>Short Option</option>
        <option>This Is A Longer Option</option>
    </select>
</label>

CSS:

css code

body, html 
{ 
    background:#444;
    text-align:center;
    padding:50px 0;
}
select 
{
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: #f8f8f8;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */

@media screen and (-webkit-min-device-pixel-ratio:0) 
{
    select {padding-right:18px}
}

label {position:relative}
label:after 
{
    content:'<>';
    font:11px "Consolas", monospace;
    color:#aaa;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}
label:before 
{
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;
}

[ad type=”banner”]

SOLUTION 4:

How to CSS form drop down style without using JavaScript .

css code

select 
{
    border: 0 none;
    color: #000;
    background: transparent;
    font-size: 20px;
    font-weight: bold;
    padding: 2px 10px;
    width: 378px;
    *width: 350px;
    *background: #58B14C;
}
#mainselection {
    overflow: hidden;
    width: 350px;
    -moz-border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    border-radius: 9px 9px 9px 9px;
    box-shadow: 1px 1px 11px #330033;
    background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C;
}
<div id="mainselection">
    <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    </select></div>

SOLUTION 5:

As of Internet Explorer 10, you can use the ::-ms-expand pseudo element selector to style, and hide, the drop down arrow element.

css code

select::-ms-expand 
{
    display:none;
    /* or visibility: hidden; to keep it's space/hitbox */
}

SOLUTION 6:

The largest variation we have noticed when styling select drop-downs is Safari and Google Chrome rendering (Firefox is fully customizable through CSS).
Here the simplest solution by using WebKit:

css code

select 
{
  -webkit-appearance: none;
}

It removes the dropdown arrow.
You can add a dropdown arrow using a nearby div with a background, negative margin or absolutely positioned over the select dropdown.

SOLUTION 7:

Select dropdown style:

Css:

css code

select  {
    outline: 0;
    overflow: hidden;
    height: 30px;
    background: #2c343c;
    color: #747a80;
    border: #2c343c;
    padding: 5px 3px 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 10px;
}
select option {border: 1px solid #000; background: #010;}

[ad type=”banner”]

SOLUTION 8:

It uses rotated background layers to cut out a dropdown arrow, as pseudo-elements wouldn’t work for the select element.

Css:

css code

select 
{
  font: 400 12px/1.3 "Helvetica Neue", sans-serif;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid hotpink;
  line-height: 1;
  outline: 0;
  color: hotpink;
  border-color: hotpink;
  padding: 0.65em 2.5em 0.55em 0.75em;
  border-radius: 3px;
  background: linear-gradient(hotpink, hotpink) no-repeat,
              linear-gradient(-135deg, rgba(255,255,255,0) 50%, white 50%) no-repeat,
              linear-gradient(-225deg, rgba(255,255,255,0) 50%, white 50%) no-repeat,
              linear-gradient(hotpink, hotpink) no-repeat;
  background-color: white;
  background-size: 1px 100%, 20px 20px, 20px 20px, 20px 60%;
  background-position: right 20px center, right bottom, right bottom, right bottom;   
}
<select>
    <option>So many options</option>
    <option>...</option>
</select>

SOLUTION 9:

Using Bootstrap(http://getbootstrap.com/).
This is the simplest solution :

css code

select.form-control 
{
    -moz-appearance: none;
    -webkit-appearance: none;
    appearancce: none;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 1ex;
    background-origin: content-box;
    background-image:url(“data:image/arrow.gif”);
}

html code

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
  <form class="form-horizontal">
    <select class="form-control">
      <option></option>
      <option>Two</option>
    </select>
  </form>
</section>

SOLUTION 10:

It can be improved with hover-effects and other mouse events.
Just make sure that the “button“-element comes right after the select element in the markup. Then target it using the + css-selector

HTML:

html code

<select class="select-input">...</select>
<div class="select-button"></div>

CSS:

css code

.select-input:hover+.select-button 
{
    [hover styles here]
}

Categorized in:

CSS HTML

Tagged in:

css - How to style the option of a html "select“, CSS Dropdowns, css style select option, css style select option dropdown, css3 - Styling select dropdown with css only, Dropdown Default Styling, How to style a dropdown with CSS only without JavaScript, How to style drop down list?, How to style select crossbrowser, Making HTML dropdowns not suck, select option css style examples, Style a Select Box Using Only CSS, style select css, Styling HTML Select, Styling menus using only CSS/CSS3, Styling select dropdown with css only

Wikitechy Editor

Leave a Reply

Other Stories

Press ESC to close

Or check our Popular Categories...

PROBLEM

SOLUTION 1:

SOLUTION 2:

SOLUTION 3:

SOLUTION 4:

SOLUTION 5:

SOLUTION 6:

SOLUTION 7:

SOLUTION 8:

SOLUTION 9:

SOLUTION 10:

Leave a Reply

Related Articles

Other Stories

When to use IMG vs. CSS background-image

Difference between require, include and require_once

Summer Offline Internship

Summer Online Internship

Internship in Chennai

Programming / Technology Internship in Chennai