How to customize a “select” HTML form element with CSS3 ?

Last Updated : 21 May, 2021

The <select> tag in HTML is used to create a drop-down list. The <select> tag contains <option> tag to display the available option of drop-down list. In this article, you will learn many ways to customize “select” HTML form element with CSS 3.

Note: The <select> tag is used in a form to receive user response.

Syntax:

<select>
    <option>
    <option>
    ...
<select>

Example 1:

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        HTML select Tag 
    </title> 
    <style> 
     *, 
      *::before, 
      *::after { 
        box-sizing: border-box; 
      } 
  
     h1  
      { 
         color:green; 
       } 
     select 
     { 
     // Removing the default dropdown arrow 
      appearance: none; 
      background-color: transparent; 
      border: none; 
      padding: 0 1em 0 0; 
      margin: 0; 
      width: 100%; 
      font-family: inherit; 
      font-size: inherit; 
      cursor: inherit; 
      line-height: inherit; 
      z-index: 1; 
      // Remove focus outline 
      outline: none; 
     } 
  
    .select { 
     display: grid; 
     grid-template-areas:"select"; 
     align-items: center; 
     position: relative;  
  
     min-width: 15ch; 
     max-width: 30ch; 
  
     border: 1px solid var(#777); 
     border-radius: 0.25em; 
     padding: 0.25em 0.5em; 
  
    font-size: 1.25rem; 
    cursor: pointer; 
    line-height: 1.1;  
   } 
  
  /* Hide arrow icon in IE browsers */ 
  .select::-ms-expand 
  { 
    display: none; 
  } 
  .select:hover::after  
   { 
    border-color: #888; 
   } 
  
// Focus on selected item 
.select:focus 
   { 
    border-color:     #800080; 
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); 
    color: #222;  
    outline: none; 
   } 
.slct:after  
   { 
    content: ''; 
    display: inline-block; 
    float: right; 
    width: .5rem; 
    height: .5rem; 
    border-bottom: 1px solid currentColor; 
    border-left: 1px solid currentColor; 
    border-bottom-left-radius: 2px; 
    transform: rotate(45deg) translate(50%, 0%); 
    transform-origin: center center; 
    transition: transform ease-in-out 100ms 
  } 
  
   <!-- For different browsers -->
     .select::after  
      { 
           -webkit-transition: .25s all ease; 
            -o-transition: .25s all ease; 
            transition: .25s all ease; 
      } 
  
  </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
      
    <h2>HTML select Tag</h2> 
    <p>Select one option from drop-down list:</p> 
    <div class="select"> 
      <select class="slct"> 
        <option value="GFG">GFG</option> 
        <option value="OS">OS 
        </option> 
        <option value="DBMS">DBMS</option> 
         
        <option value="Data Structure"> 
            Data Structure 
        </option> 
      </select>       
   </div> 
</body> 
  
</html> 

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML select Tag 
    </title> 
    <style> 
     body { 
      display: flex; 
      flex-direction: column; 
      justify-content: center; 
      align-items: center; 
      height: 100vh;   
     } 
    h1 { 
     margin: 0 0 0.25em; 
    } 
    /* Reset Select */ 
    select { 
     -webkit-appearance: none; 
      -moz-appearance: none; 
      -ms-appearance: none; 
      appearance: none; 
      outline: 0; 
      box-shadow: none; 
      border: 0 !important; 
      background: green; 
      background-image: none; 
    } 
    /* Remove IE arrow */ 
    select::-ms-expand { 
      display: none; 
    } 
    /* Custom Select */ 
    .select { 
      position: relative; 
      display: flex; 
      width: 20em; 
      height: 3em; 
      line-height: 3; 
      background: #2c3e50; 
      overflow: hidden; 
      border-radius: .25em; 
    } 
    select { 
      flex: 1; 
      padding: 0 .5em; 
      color: #fff; 
      cursor: pointer; 
    } 
    /* Arrow */ 
    .select::after { 
      content: '\25BC'; 
      position: absolute; 
      top: 0; 
      right: 0; 
      padding: 0 1em; 
      background: #34495e; 
      cursor: pointer; 
      pointer-events: none; 
      -webkit-transition: .25s all ease; 
      -o-transition: .25s all ease; 
      transition: .25s all ease; 
    } 
    /* Transition */ 
    .select:hover::after { 
      color: green; 
    } 
  
  </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
      
    <h2>HTML select Tag</h2> 
    <p>Select one option from drop-down list:</p> 
    <div class="select"> 
     <select class="slct"> 
        <option value="GFG">GFG</option> 
        <option value="OS">OS 
        </option> 
        <option value="DBMS">DBMS</option> 
         
        <option value="Data Structure"> 
            Data Structure 
        </option> 
     </select>       
    </div> 
</body> 
</html>                     

Output:

Example 3:

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Pure CSS Styled Select</title> 
  <style> 
    body { 
      background-color: #a4ecae; 
      font-family: 'Source Sans Pro', sans-serif; 
  
    } 
    .demo { 
      margin: 100px auto; 
    } 
  
    .dropdown-container { 
      width: 250px; 
      margin: 100px auto; 
      position: relative; 
    } 
  
    select { 
      width: 100%; 
      height: 50px; 
      font-size: 100%; 
      font-weight: bold; 
      cursor: pointer; 
      border-radius: 0; 
      background-color: #2bd325; 
      border: none; 
      border-bottom: 2px solid #37c40c; 
      color: white; 
      appearance: none; 
      padding: 10px; 
      padding-right: 38px; 
      -webkit-appearance: none; 
      -moz-appearance: none; 
      transition: color 0.3s ease, background-color 0.3s ease, 
                   border-bottom-color 0.3s ease; 
    } 
  
    /* For IE <= 11 */ 
    select::-ms-expand { 
      display: none;  
    } 
  
    .select-icon { 
      position: absolute; 
      top: 4px; 
      right: 4px; 
      width: 30px; 
      height: 36px; 
      pointer-events: none; 
      border: 2px solid #70d82a; 
      padding-left: 5px; 
      transition: background-color 0.3s ease, border-color 0.3s ease; 
    } 
    .select-icon svg.icon { 
      transition: fill 0.3s ease; 
      fill: white; 
    } 
    <!--- hover and focus effect-->
    select:hover, 
    select:focus { 
      color: #5ac02b; 
      background-color: white; 
      border-bottom-color: #141313; 
    } 
    <!---- CSS selector -->
    select:hover ~ .select-icon, 
    select:focus ~ .select-icon { 
      background-color: white; 
      border-color: #3dd13db6; 
    } 
    select:hover ~ .select-icon svg.icon, 
    select:focus ~ .select-icon svg.icon { 
      fill: #67c02b; 
    } 
  
  </style> 
</head> 
<body> 
  <div class="demo"> 
    <div class="dropdown-container"> 
      <select class="slct"> 
        <option value="1">GFG</option> 
        <option value="2">OS 
          </option> 
        <option value="3">DBMS</option> 
             
        <option value="4"> 
          Data Structure 
        </option> 
        </select> 
      <!-----Adding a custom icon on the right-->
      <div class="select-icon"> 
        <svg focusable="false" viewBox="0 0 104 128" 
             width="25" height="35" class="icon"> 
          <path 
               d="m2e1 95a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9 9 
                  0 0 1 9 -9 9 9 0 0 1 9 9zm0-3e1a9 9 0 0 1  
                  -9 9 9 9 0 0 1 -9 -9 9 9 0 0 1 9 -9 9 9 0 0  
                  1 9 9zm0-3e1a9 9 0 0 1 -9 9 9 9 0 0 1 -9 -9 9  
                  9 0 0 1 9 -9 9 9 0 0 1 9 9zm14  
                  55h68v1e1h-68zm0-3e1h68v1e1h-68zm0-3e1h68v1e1h-68z"> 
          </path> 
        </svg> 
      </div> 
    </div> 
  </div> 
</body> 