How to remove the arrow from a select element in Firefox

Question

I\'m trying to style a select element using CSS3. I\'m getting the results I desire in WebKit (Chrome / Safari), but Firefox isn\'t playing nicely (I\'m not ev

Answer 1

I know this question is a bit old, but since it turns up on google, and this is a "new" solution:

appearance: normal Seems to work fine in Firefox for me (version 5 now). but not in Opera and IE8/9

As a workaround for Opera and IE9, I used the :before pseudoselector to create a new white box and put that on top of the arrow.

Unfortunately, In IE8 this doesn't work. The box is rendered correctly, but the arrow just sticks out anyway... :-/

Using select:before works fine in Opera, but not in IE. If I look at the developer tools, I see it is reading the rules correctly, and then just ignores them (they're crossed out). So I use a around the actual .

select {
  -webkit-appearance: normal;
  -moz-appearance: normal;
  appearance: normal;
}
.selectwrap { position: relative; }
.selectwrap:before {
  content: "";
  height: 0;
  width: 0;
  border: .9em solid red;
  background-color: red;
  position: absolute;
  right: -.1em;
  z-index: 42;
}

You may need to tweak this a bit, but this works for me!

Disclaimer: I'm using this to get a good looking hardcopy of a webpage with forms so I don't need to create a second page. I'm not a 1337 haxx0r who wants red scrollbars, tags, and whatnot :-) Please do not apply excessive styling to forms unless you have a very good reason.

0 讨论(0)

查看其它30个回答

发布评论:

提交评论

---

•  加载中...

验证码

 看不清?

提交回复

热议问题