CODEWITHSUNDEEP
htmlcss
LOTUSMS
LOTUSMS

Reputation: 10240

border-radius not working in MacOS/-webkit-

I am rounding some corners on a form inputs and found out that the border-radius doesn't work for <select>. It works on all the other input fields, but not on select dropdowns. I just noticed this when I grabbed my Macbook Pro and I don't remember seeing this problem while on my Windows machine. Is this a OSX/Browser issue?

I made a codepen to test it outside my environment, and sure enough! It doesn't work there either!

Have a look at the codepen

HTML:

<select class="form-control">
    <option value="">Select User</option>
</select>
<input type="text" class="form-control">

CSS:

.form-control{
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    border-radius: 50px;
    border: 2px solid #bbb;
}

If it is a Mac OS/Browser combo issue, is there a workaround to this?

UPDATE:

Safari is fine, but not Chrome or Safari

Upvotes: 2

Views: 4695

Answers (1)

j3py
j3py

Reputation: 1257

Here's an example jsfiddle using your code and the third answer from this post:

<div class="form-control">
  <div class="form-control rounded">
    <select class="form-select">
        <option value="">Select User</option>
    </select>
  </div>
  <div class="form-control">
    <input type="text" class="rounded">
  </div>
</div>

The CSS:

.form-control {
    display:inline;
    overflow:hidden;
}

.form-select {
  border:0px;
  outline:none;
}

.rounded {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    border-radius: 50px;
    border: 2px solid #bbb;
}

Upvotes: 1

Related Questions