CODEWITHSUNDEEP
htmlcssformsbrowser
Al John
Al John

Reputation: 900

Change browser-default form dropdown buttons?

I have a very strange CSS problem affecting different browsers and I don't understand how this happens. How can I style the form dropdown menu buttons and dropdown content? The background color can been changed, the border can be changed but the border-radius doesn't change when changing the CSS border radius.

The form button looks different on every browser. The dropdown menu shows best on Firefox as it has no border radius, no glow like Safari and even the dropdown content shows a green background color and white text.

Safari

Chrome

Firefox

1 = Safari, glow + border radius + basic white dropdown content.

2 = Chrome, border radius + basic white dropdown content + greater length.

3 = Firefox, perfectly styled, has styled dropdown content but terrible dropdown icon!

Upvotes: 0

Views: 1211

Answers (1)

gavgrif
gavgrif

Reputation: 15509

This is not a dropdown element - but a select html element and as such has limited styling available and as you have found - much variation between browsers.

You can hide the browser native icon and insert one of your own by setting position: relative on the parent (select-wrapper) element and position: absolute on the child (icon) element and position it as you want.

This allows you to have control over the look of the icon. Be aware that the glow on focus is recommended for accessibility concerns - but you can remove that if you absolutely want to.

.select-wrapper {
  position: relative;
  width: 90px
}

select {
  padding: 4px 24px 4px 8px;
  font-size: 14px;
  background: #36af4b;
  color: #fff;
  border-radius: 4px;
   -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    width: 100%;
    display: block
}

select:focus {
  outline: none;
}

.select-wrapper .fa{
  position: absolute;
  color: #fff;
  right: 10px;
  top: 5px;
  z-index: 1
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />



<div class="select-wrapper">
  <select>
   <option> option 1</option>
   <option> option 2</option>
   <option> option 3</option>
  </select>
  <span class="fa fa-angle-down"></span>
</div>

Upvotes: 1

Related Questions