CSS3 Pie has some odd functionality when styling select tags. The border radius and box shadow seem to apply the effect and then place the non-styled select box overtop of the effect. Is this an issue anyone has come across and worked around before?
Asked
Active
Viewed 694 times
2 Answers
1
I was actually having this issue, but figured out a fix.
Initially, with
behavior: url(stylesheets/PIE.htc);
the select would open at first, but if I applied a class of error on it with javascript during validation to make the border and background color change to red, it would no longer open properly. To get it to still work properly, you need to add 3 additional pie properties to the select. After adding
.ie select{
behavior: url(stylesheets/PIE.htc);
-pie-poll:false;
-pie-track-hover:false;
-pie-track-active:false;
}
I was able to get it to work and function 100% properly.
Evan
- 67
- 10
-
Good job, problem is, it takes an extra click to drop down the menu :-/ – sksallaj Dec 10 '13 at 23:53
-1
Do you mean to style it like this? http://jsfiddle.net/Tmzjz/1/
If you check this in IE7/8, the select box will not function properly.
When you need rounded corners and box shadows for select box, it is better to use a javascript method - http://cssglobe.com/custom-styling-of-the-select-elements/
user1512616
- 509
- 3
- 6
-
CSS3 PIE is javascript methods. I suppose it just doesn't work correctly for select boxes. The method you've provided uses absolute positioning. I cannot use this as I'll be using a liquid layout. – steventnorris Aug 27 '12 at 14:58