ADVERTISEMENT
ADVERTISEMENT

How do I style a <select> dropdown with only CSS?

Learn how to How do I style a <select> dropdown with only CSS?
Submitted by Shahnail Khan, on April 14, 2022

A dropdown consists of a list of options that are displayed when a user hovers over the menu bar. Once an item is selected from a list of options, the list disappears and the user is redirected to another webpage. We can easily make a dropdown menu by using <select> and <option> tags in HTML. First, we need to add an <select> element and then create option elements that are to be placed inside the <select> tag. We can add value attribute within <option> tag. Then comes the styling part. We can style the dropdown menu with only CSS. We just have to style <select> and <option> elements.

The example given below explains the CSS property used to style dropdown menu.

Example:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Styling dropdown</title>
   </head>
   
   <style>
      .container1{
      background-color: teal;
      display: flex;
      justify-content: center;
      padding: 10px;  
      }
      select{
      padding: 6px;
      border-radius: 10px;
      font: 1em sans-serif;
      background: lightgray;  
      cursor: pointer;   
      }
      option{
      background-color: bisque;
      }
   </style>
   
   <body>
      <h2>IncludeHelp</h2>
      <div class="container1">
         <select>
            <option style="display: none;">Programming Languages</option>
            <option value="One">C</option>
            <option value="Two">C++</option>
            <option value="Three">JAVA</option>
            <option value="Four">PYTHON</option>
         </select>
      </div>
   </body>
</html>

Output:

Example | style a select dropdown

As you can see, we have created a simple dropdown menu using <select> and <option> tags in HTML. Then, we applied CSS property to select and option elements. Basic CSS properties, namely, padding, border-radius, font, background-color, and cursor are used.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.