Removing rounded corners from a <select> element in Chrome/Webkit
SelectWebkitCssSelect Problem Overview
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
Select Solutions
Solution 1 - Select
This works for me (styles the first appearance not the dropdown list):
select {
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
Solution 2 - Select
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.
Solution 3 - Select
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;
}
Solution 4 - Select
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>
Solution 5 - Select
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!
Solution 6 - Select
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>
Solution 7 - Select
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.
Solution 8 - Select
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.
Solution 9 - Select
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;
}
Solution 10 - Select
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);
}
Solution 11 - Select
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>
Solution 12 - Select
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("<your image>");
background-repeat: no-repeat;
background-position: 100%;
background-size: 20px;
}
Solution 13 - Select
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>
Solution 14 - Select
firefox: 18
.squaredcorners {
-moz-appearance: none;
}
Solution 15 - Select
Set the CSS as
border-radius:0px !important
-webkit-border-radius:0px !important
border-top-left-radius:0px !important
Try if it works.