Menu
I want to make the second select box arrow become the same with the first one. But I have no idea why they are different, because I didn't style the arrow.
487
The main trick is to apply appearance: none which lets you override some of the styling. It doesn't replace the OS select menu UI element so all the problems related to doing that are non-existant (not being able to break out of the browser window with a long list being the main one).
Attach Inspector, press Ctrl+Shift+LMB on that arrow and you'll see what you should change.
There are many ways to design a <select> dropdown menu using CSS. The Dropdown Menu is mainly used to select an element from the list of elements. Each menu option can be defined by an <option> element that can nested inside the <select> element.
Browsers and OS's determine the style of the select boxes in most cases, and it's next to impossible to alter them with CSS alone. You'll have to look into replacement methods. The main trick is to apply appearance: none which lets you override some of the styling.
My favourite method is this one:
http://cssdeck.com/item/265/styling-select-box-with-css3
It doesn't replace the OS select menu UI element so all the problems related to doing that are non-existant (not being able to break out of the browser window with a long list being the main one).
Good luck :)
55
you can use jQuery selectbox replacement. It's a jQuery plugin.
http://cssglobe.com/post/8802/custom-styling-of-the-select-elements
The Pure-css http://bavotasan.com/2011/style-select-box-using-only-css/
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
