Question 43397 in Html Question posted in
Some basic documentation can be found here.

how to change the option container of a select – Html

I have a select and I would like to change the design of the options container, especially by changing it with rounded corners and removing the borders

       <select>
           <option val="0" selected></option>
           <option val="1"></option>
           <option val="2"></option>
           <option val="3"></option>
           <option val="4"></option>
           <option val="5"></option>
      </select>

I know the solution to change the style of the select and the options but I don’t know how to change in css the options container

Tags:

2

Answers


  1. 0

    You can change the select tag with CSS just like any other element:

    #select-1 {
  border-radius: 10px;
  border: 0;
}

#select-2 {
  border-radius: 10px;
}
     <select id="select-1">
   <option val="0" selected>0</option>
   <option val="1">1</option>
   <option val="2">2</option>
   <option val="3">3</option>
   <option val="4">4</option>
   <option val="5">5</option>
 </select>

 <select id="select-2">
   <option val="0" selected>0</option>
   <option val="1">1</option>
   <option val="2">2</option>
   <option val="3">3</option>
   <option val="4">4</option>
   <option val="5">5</option>
 </select>

    However, styling select or option tags is somewhat very limited. For example, changing the appearance of the dropdown arrow icon will be difficult. Furthermore, changing the style of the option container is not possible (or at least very limited).

    State of the art would be to discard the HTML built-in component and write your own dropdown component (example).

    Login or Signup to reply.
  2. 0

    there are multiple ways to style your select option.Here is one way

    .custom-select {
  border-radius: 10px;
  border: 0;
  background-color: red;
}

       <select class="custom-select">
           <option val="0" selected>0</option>
           <option val="1">1</option>
           <option val="2">2</option>
           <option val="3">3</option>
           <option val="4">4</option>
           <option val="5">5</option>
      </select>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search