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 element. I\'ve tried getting rid of this by applying a
-
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:
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.
加载中...
- 热议问题