CODEWITHSUNDEEP
css
ankush981
ankush981

Reputation: 5417

Rounded corners on `select` in Chrome and Safari

I was trying to change the rounding of the corners of a <select> element. I couldn't, using any of the border-radius properties (CodePen demo here). 

select, input {
    width: 30%;
    height: 30px;
    border: none;
    padding: 18px 22px;
    border-radius: 0 1em 3em 0;
    color: white;
    background-color: #8842d5;
}
<select>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="pig">Pig</option>
</select>
<br>
<br>
<input type="text">

The result: enter image description here

AS you can see, the <select> doesn't budge.

I later came across this GitHub discussion from the Bootstrap project, which essentially says <select> elements cannot be styled using border-radius in Webkit-based browsers.

Okay, but what other techniques can I use to accomplish this? With reference to the screenshot I shared, is there no way to make the corners of the select look like the corners of the input?

Upvotes: 2

Views: 2187

Answers (2)

Matt Wolff
Matt Wolff

Reputation: 349

You can't do much to directly modify the native <select> element. As you've already encountered <select> elements only accept a limited set of styling options. This MDN article elaborates on that further.

HOWEVER, you could wrap your <select> element with a container element and apply your styles there. Something like this should do the trick:

body {
  /* Set a font-size for proper em sizing */
  font-size: 11px;
}

.select-wrap {
  position: relative;
  width: 30%;
  height: 30px;
  border: none;
  padding: 18px 22px;
  border-radius: 0 1em 3em 0;
  color: white;
  background-color: #8842d5;
}

.select-wrap select {
  position: absolute;
  background: transparent;
  top: 0;
  left: 0;
  outline: none;
  border: none;
  -webkit-appearance: none;
  display: block;
  padding-left: 22px;
  color: white;
  width: 100%;
  height: 100%;
}

.arrow {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 1.5em;
  top: 0;
  bottom: 0;
  height: 100%;
  vertical-align: text-bottom;
  pointer-events: none;
  color: white;
  font-weight: bold;
}


input {
  width: 30%;
  height: 30px;
  border: none;
  padding: 18px 22px;
  border-radius: 0 1em 3em 0;
  color: white;
  background-color: #8842d5;
}
<div class="select-wrap">
  <select>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="pig">Pig</option>
  </select>
  <span class="arrow">⬇</span>
</div>
<br>
<input type="text">

Note: Using -webkit-appearance: none; will hide your arrows so there's a custom .arrow element as well. It has pointer-events:none so that those clicks land on the <select> element instead.

Upvotes: 4

Marcelo F.
Marcelo F.

Reputation: 395

Try -webkit-appearance: none . But note you'll have to re-style everything, including the arrow icon (which you can refactor with a simple background-image).

Upvotes: -1

Related Questions