145

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?

4
  • Could you also post the code? Even better if you post it using jsfiddle.net.
    – ngen
    Commented Apr 25, 2011 at 15:45
  • 1
    I actually don't have any border-radius as a default style in Chrome 10 on Win7, maybe this is another version or OS?
    – Mog
    Commented Apr 25, 2011 at 15:53
  • No rounded corners in Chrome 12 on Windows 7 either.
    – andyb
    Commented Apr 25, 2011 at 16:02
  • 1
    Should have mentioned that it's on Mac OS X.
    – maxedison
    Commented Apr 27, 2011 at 14:05

15 Answers 15

247

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

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

http://jsfiddle.net/fMuPt/

7
  • 181
    Any way to remove the rounded corners but keep the arrows on the right?
    – Adam
    Commented Jun 16, 2014 at 0:59
  • 3
    you need to add the arrows e.g. as background image with position 100% 50% and no-repeat attribute. I also used base64 encoded image in css to avoid additional http requests.
    – Karl Adler
    Commented Jul 23, 2014 at 12:27
  • 26
    @Adam It worked for me if you use border: 0 and add an outline like: outline: 1px inset black; outline-offset:-1px Commented Nov 5, 2014 at 9:49
  • 1
    @FilipePereira Nice I like it, although I'll have to add that outline-offset is not supported by IE.
    – Tim
    Commented Nov 25, 2014 at 10:56
  • 6
    This eliminates the arrows on the right, which unacceptably damages the user experience. Instead, style the dropdown background-color: #yourbg and border-style: none then create a div directly before the dropdown with position: absolute and border-bottom: 1px solid #youpick and display: inline. Arrows preserved, UX unharmed, better fix.
    – devigner
    Commented Jun 10, 2016 at 18:27
92

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.

6
  • 4
    This is the only answer that solved my problem, although be mindful of using background vs background-image as the svg's fill color will overwrite any background color you had set for your input.
    – Lucas M
    Commented Jun 15, 2016 at 15:16
  • Agreed, Please vote up this answer ! I don't understand the other votes on an incomplete answer. Any advice to use fontawesome icon instead of inline svg ? Commented Jun 29, 2016 at 11:38
  • FontAwesome is a collection of icons but you need only one icon. So you need to extract one of the FA icons using some tool like icomoon.io After that export that icon as an svg or png file and link it from your css Commented Jul 1, 2016 at 9:57
  • Nice solution, but in my situation i added background-color: white; Commented Aug 31, 2016 at 16:54
  • Note however, when you set width: auto;, the added svg arrow overlays the content of the select. This requires an additional padding to the right side of 16px. This padding however is visible over all browsers, breaking the design on other browsers. I have no solution for that yet ... Commented Aug 17, 2017 at 12:47
31

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;
}
5
  • 2
    The problem with this is that you will override the default outline on :focus. If you are going to use this answer, you should change your select:focus style to visually show that the select element is becomes active, or :focused, on click.
    – Devin M
    Commented Aug 15, 2015 at 0:53
  • @jordan314 Check out the rounded corners on this pic. Border-radius: 0; has no effect on the select tag. At least on Chrome OSX anyway.
    – Jammer
    Commented Oct 29, 2015 at 23:11
  • 1
    @7immy that's strange, I'm also on Chrome OS X and here is a screenshot of the above fiddle imgur.com/r6ce6Yv
    – alana314
    Commented Oct 29, 2015 at 23:23
  • 1
    @jordan314 How about this? jsfiddle.net/78xa6qud/2. I guess we can get away with it if the select's background and the background behind it are the same colour.
    – Jammer
    Commented Oct 30, 2015 at 9:11
  • @7immy ah yes, I guess that's a caveat.
    – alana314
    Commented Oct 30, 2015 at 19:28
8

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

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!

0
4

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>

1
  • Background positioning that worked better for my needs was: background-position: calc(100% - 4px) center, 100% center; This moves the arrow to the middle of the select and all the way to the right. Thanks a lot for the great start! Commented Jan 25, 2020 at 23:09
3

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
  • 1
    I agree, this is by far the simplest and most reliable and portable solution. Commented Dec 8, 2019 at 17:17
1

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

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

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/

2
  • Hmm not sure about OSX. Just tried it again on Windows (Chrome Version 45.0) and it still works. I guess to make the issue even more weird it's platform specific...
    – mcallahan
    Commented Oct 13, 2015 at 13:28
  • That is because setting the border causes the browser to render the combobox itself, rather than using the underlying one provided by the OS.
    – Kong
    Commented Nov 23, 2015 at 5:12
0

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

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

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

firefox: 18

.squaredcorners {
    -moz-appearance: none;
}
1
  • The question about Chrome/Webkit.
    – zishe
    Commented Jul 5, 2014 at 18:31
-10

Set the CSS as

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

Try if it works.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.