CODEWITHSUNDEEP
selectwebkitcss
maxedison
maxedison

Reputation: 17553

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

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?

Upvotes: 145

Views: 166937

Answers (15)

Afzal Hossain
Afzal Hossain

Reputation: 3338

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.

Upvotes: 92

Jerome Anthony
Jerome Anthony

Reputation: 8021

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;
  }

Upvotes: 0

Sitti Munirah Abdul Razak
Sitti Munirah Abdul Razak

Reputation: 1109

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>

Upvotes: -1

Mihai Crăiță
Mihai Crăiță

Reputation: 3417

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>

Upvotes: 4

Danny Santos
Danny Santos

Reputation: 1160

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.

Upvotes: 3

aleemb
aleemb

Reputation: 32065

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>

Upvotes: 8

Marco Allori
Marco Allori

Reputation: 3294

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

Upvotes: 1

devigner
devigner

Reputation: 152

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.

Upvotes: 1

Amit
Amit

Reputation: 1919

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>

Upvotes: 0

Reed Martin
Reed Martin

Reputation: 159

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!

Upvotes: 6

alana314
alana314

Reputation: 633

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;
}

Upvotes: 31

mcallahan
mcallahan

Reputation: 79

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/

Upvotes: 0

david forstner
david forstner

Reputation: 9

firefox: 18

.squaredcorners {
    -moz-appearance: none;
}

Upvotes: -8

AbhiRoczz...
AbhiRoczz...

Reputation: 252

Set the CSS as 

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

Try if it works.

Upvotes: -10

antonj
antonj

Reputation: 21816

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

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

http://jsfiddle.net/fMuPt/

Upvotes: 247

Related Questions