Removing rounded corners from a select element in Chrome Webkit

Question

The user-agent stylesheet for Chrome gives a border-radius of 5px to all the corners of a  lt select gt  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

User · Answer

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

_x000D_

select {_x000D_
  height: 20px;_x000D_
  -webkit-border-radius: 0;_x000D_
  border: 0;_x000D_
  outline: 1px solid #ccc;_x000D_
  outline-offset: -1px;_x000D_
}

_x000D_

<select>_x000D_
 <option>Apple</option>_x000D_
 <option>Ball</option>_x000D_
 <option>Cat</option>_x000D_
</select>

_x000D_

User · Answer

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    lt select class  form-control border border-light  id  type  gt      lt option gt Select lt  option gt      lt option value  mobile  gt Apple lt  option gt    lt  select gt    if you don t have the predefined border-light  just add in your css    lt style gt   border-light           border-color  f8f9fa important           type      border 0     outline 1px solid  ddd     background-color white      lt  style gt

User · Answer

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

User · Answer

This works for me  styles the first appearance not the dropdown list    select     -webkit-appearance  none    -webkit-border-radius  0px      http   jsfiddle net fMuPt

User · Answer

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

User · Answer

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    lt div class  myDiv  gt  lt  div gt   lt select class  myDropdown     gt     lt  select gt    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

User · Answer

firefox  18   squaredcorners       -moz-appearance  none

User · Answer

Solution with custom right drop-down arrow  uses only css  no images    x000D   x000D  select   x000D    -webkit-appearance  none  x000D    -webkit-border-radius  0px  x000D    background-image  linear-gradient 45deg  transparent 50   gray 50    linear-gradient 135deg  gray 50   transparent 50    x000D    background-position  calc 100  - 20px  calc 1em   2px   calc 100  - 15px  calc 1em   2px   calc 100  - 2 5em  0 5em  x000D    background-size  5px 5px  5px 5px  1px 1 5em  x000D    background-repeat  no-repeat  x000D   x000D    -moz-appearance  none  x000D    display  block  x000D    padding  0 3rem  x000D    height  2rem  x000D    width  100   x000D    x000D   lt html gt  x000D   x000D   lt body gt  x000D     lt br  gt  x000D     lt h4 gt Example lt  h4 gt  x000D     lt select gt  x000D       lt option gt  lt  option gt  x000D       lt option gt Hello lt  option gt  x000D       lt option gt World lt  option gt  x000D     lt  select gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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  lt 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  gt  lt path fill   23444  d  M7 406 7 828l4 594 4 594 4 594-4 594 1 406 1 406-6 6-6-6z  gt  lt  path gt  lt  svg gt         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

User · Answer

Following is the way to do it    Create a background image that looks like a dropdown   Switch off browser appearance Align the background image on the select component      control select         border-radius  0px      appearance  none      -webkit-appearance  none      -moz-appearance  none      background-image  url   lt your image gt         background-repeat  no-repeat      background-position  100       background-size  20px

User · Answer

well i got the solution  hope it may help you      x000D   x000D  select  x000D        border-image  url http   www w3schools com cssref border png  30 stretch  x000D        width  120px  x000D        height  36px  x000D        color   999  x000D      x000D   lt select gt  x000D     lt option value  1  gt Hi lt  option gt  x000D     lt option value  2  gt Bye lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

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

User · Answer

Set the CSS as   border-radius 0px  important -webkit-border-radius 0px  important border-top-left-radius 0px  important   Try if it works

User · Answer

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

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

Examples related to select

Examples related to webkit

Examples related to css