Removing rounded corners from a <select> element in Chrome/Webkit

143
votes

The user-agent stylesheet for Chrome gives a border-radius of 5px to all the corners of a <select> element. I've tried getting rid of this by applying a radius of 0px through my external stylesheet, as well inline on the element itself; I've tried both border-radius:0px and -webkit-border-radius:0px; and I've tried the even more specific border-top-left-radius:0px (along with it's -webkit equivalent).

None are working.

When I examine the element in webkit's developer tools, the Computed Style still lists the radius as 5px. But if I click the expander arrow next to it to see the specifics, it reads: element.style - 0px. And below that it shows the external css specification I gave of 0px, along with the user-agent stylesheet specification of 5px. And both of those latter two are crossed out, as they should be.

Any ideas?

15
selectwebkitcss
Could you also post the code? Even better if you post it using jsfiddle.net. - ngen
I actually don't have any border-radius as a default style in Chrome 10 on Win7, maybe this is another version or OS? - Wesley Murch
No rounded corners in Chrome 12 on Windows 7 either. - andyb
Should have mentioned that it's on Mac OS X. - maxedison

15 Answers

246
votes

This works for me (styles the first appearance not the dropdown list):

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
}

http://jsfiddle.net/fMuPt/

92
votes

Just my solution with dropdown image (inline svg)

select.form-control {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

I'm using bootstrap that's why I used select.form-control
You can use select{ or select.your-custom-class{ instead.

31
votes

If you want square borders and still want the little expander arrow, I recommend this:

select.squarecorners{
     border: 0;
     outline: 1px solid #CCC;
     background-color: white;
}
7
votes

Some good solutions here but this one doesn't need SVG, preserves the border via outline and sets it flush on the button.

select {
  height: 20px;
  -webkit-border-radius: 0;
  border: 0;
  outline: 1px solid #ccc;
  outline-offset: -1px;
}
<select>
 <option>Apple</option>
 <option>Ball</option>
 <option>Cat</option>
</select>
6
votes

While the top answer removes the border, it also removes the arrow which makes it extremely difficult if not impossible for the user to identify the element as a select.

My solution was to just stick a white div (with border-radius:0px) behind the select. Set its position to absolute, its height to the height of the select, and you should be good to go!

4
votes

Solution with custom right drop-down arrow, uses only css (no images)

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;

  -moz-appearance: none;
  display: block;
  padding: 0.3rem;
  height: 2rem;
  width: 100%;
}
<html>

<body>
  <br/>
  <h4>Example</h4>
  <select>
    <option></option>
    <option>Hello</option>
    <option>World</option>
  </select>
</body>

</html>
3
votes

One way to keep it simple and avoid messing with the arrows and other such features is just to house it in a div with the same background color as the select tag.

1
votes

Eliminating the arrows should be avoided. A solution that preserves the dropdown arrows is to first remove styles from the dropdown:

.myDropdown {
  background-color: #yourbg;
  border-style: none;
}

Then create div directly before the dropdown in your HTML:

<div class="myDiv"></div>
<select class="myDropdown...">...</select>

And style the div like this:

.myDiv {
  background-color: #yourbg;
  border-style: none;
  position: absolute;
  display: inline;
  border: 1px solid #acolor;
}

Display inline will keep the div from going to a new line, position absolute removes it from the flow of the page. The end result is a nice clean underline you can style as you'd like, and your dropdown still behaves as the user would expect.

1
votes

Inset box-shadow does the trick.

select{
  -webkit-appearance: none;
  box-shadow: inset 0px 0px 0px 4px;
  border-radius: 0px;
  border: none;
  padding:20px 150px 20px 10px;
}

Demo

0
votes

For some reason it's actually affected by the color of the border??? When you use the standard color the corners stay rounded but if you change the color even slightly the rounding goes away.

select.regularcolor {
    border-color: rgb(169, 169, 169);
}

select.offcolor {
    border-color: rgb(170, 170, 170);
}

https://jsfiddle.net/hLg70o70/2/

0
votes

well i got the solution. hope it may help you :)

select{
      border-image: url(http://www.w3schools.com/cssref/border.png) 30 stretch;
      width: 120px;
      height: 36px;
      color: #999;
  }
<select>
  <option value="1">Hi</option>
  <option value="2">Bye</option>
</select>
0
votes

Following is the way to do it;

  1. Create a background image that looks like a dropdown.
  2. Switch off browser appearance
  3. Align the background image on the select component
  .control select {  
    border-radius: 0px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("<your image>");
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 20px;
  }
-1
votes

I used jordan314's solution, but then I added "border-light" class to select. If you have default border-light class defined in css, you can directly use it. It just defines the border as white). I changed the border to square/remove the radius, and maintained the arrow.

Here is what I did:

<select class="form-control border border-light" id="type">
   <option>Select</option>
   <option value="mobile">Apple</option>
 </select>

if you don't have the predefined border-light, just add in your css:

<style>
.border-light{
         border-color:#f8f9fa!important
     }

 #type {
   border:0;
   outline:1px solid #ddd;
   background-color:white;
 }
</style>
-8
votes

firefox: 18

.squaredcorners {
    -moz-appearance: none;
}
-10
votes

Set the CSS as 

border-radius:0px !important
-webkit-border-radius:0px !important
border-top-left-radius:0px !important

Try if it works.