CSS - Border Radius for the Drop Down Box When Using the Select Tag? Not the Select Input Ittself, the Actual Drop Down Box

CSS - Border Radius for the drop down box when using the SELECT tag? Not the SELECT input ittself, the actual drop down box?

You will not be able to achieve this SELECT DROPDOWN style, with standard HTML form elements, you would have to 'substitute' the dropdown / select with DIV non form elements, then update the selected value to either a hidden form element or a hidden select dropdown.

If you got it somewhat that way you wanted, it would not be cross-browser compatible.

An example of a jQuery substitute is here: https://stackoverflow.com/a/8450718/158014

How to remove border of drop down list : CSS

The most you can get is:

select#xyz {
   border:0px;
   outline:0px;
}

You cannot style it completely, but you can try something like

select#xyz {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: url(../images/select-arrow.png), 
    -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  color: #555;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Rounded corner select drop down

You get very little control on the style of the dropdown of a native select control, and you certainly can't add rounded borders to it.

To achieve what you need you would have to use a third party dropdown plugin which replaces the select and its option elements with plain HTML, such as Select2.

---

Related Topics