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?
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.
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;
}
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>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 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>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.
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.
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
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/
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>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;
}
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>
firefox: 18
.squaredcorners {
-moz-appearance: none;
}
Set the CSS as
border-radius:0px !important
-webkit-border-radius:0px !important
border-top-left-radius:0px !important
Try if it works.
加载中,请稍侯......
精彩评论