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?
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.
Following is the way to do it;
.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;
}
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;
}
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 with custom right drop-down arrow, uses only css (no images)
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_
}<html>_x000D_
_x000D_
<body>_x000D_
<br/>_x000D_
<h4>Example</h4>_x000D_
<select>_x000D_
<option></option>_x000D_
<option>Hello</option>_x000D_
<option>World</option>_x000D_
</select>_x000D_
</body>_x000D_
_x000D_
</html>well i got the solution. hope it may help you :)
select{_x000D_
border-image: url(http://www.w3schools.com/cssref/border.png) 30 stretch;_x000D_
width: 120px;_x000D_
height: 36px;_x000D_
color: #999;_x000D_
}<select>_x000D_
<option value="1">Hi</option>_x000D_
<option value="2">Bye</option>_x000D_
</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);
}
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.
Set the CSS as
border-radius:0px !important
-webkit-border-radius:0px !important
border-top-left-radius:0px !important
Try if it works.
firefox: 18
.squaredcorners {
-moz-appearance: none;
}
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;
}
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!
Some good solutions here but this one doesn't need SVG, preserves the border via outline and sets it flush on the button.
select {_x000D_
height: 20px;_x000D_
-webkit-border-radius: 0;_x000D_
border: 0;_x000D_
outline: 1px solid #ccc;_x000D_
outline-offset: -1px;_x000D_
}<select>_x000D_
<option>Apple</option>_x000D_
<option>Ball</option>_x000D_
<option>Cat</option>_x000D_
</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>
Source: Stackoverflow.com