Removing rounded corners from a <select> element in Chrome/Webkit
This works for me (styles the first appearance not the dropdown list):
select {
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
http://jsfiddle.net/fMuPt/
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.