Hello guys, I have created a form and I'm trying to use select element as my custom design I'm doing it on Google Chrome without a problem but Firefox and IE shows its element on my design, how can I disable it? Thanks
Well yes I want to hide the browser's select element and use my own custom design, it works fine for Chrome and Safari but Firefox and Internet Explorer doesn't hide their select element and it shows on my design border: none; background-color: #F0F0F0; background-image: url('images/select.png'); background-repeat: no-repeat; -webkit-appearance: none; appearance: none; After I have added the code below it didn't show up on Chrome and Safari: -webkit-appearance: none; appearance: none;
Ahh I see what you mean, this is a feature not supported in IE & Opera. For firefox you can use: -moz-appearance:none; If you simply want to hide an element you can also use display:none; or visibility:hidden;
I tried -moz-appearance:none; and I think it doesn't work any more, and if I use display:none I can see anything I think I'm gonna give up, it's really stupid what these browser developers do!
1) without seeing the element or the code you are trying to use, you are NOT going to get anything resembling real help on what you are asking.... though: 2) It SOUNDS like you are trying to do some form of javascript or CSS nonsense to style something that CANNOT be made consistent cross-browser in the first place, and are making design decisions that piss all over accessibility. SELECTS like most form elements don't even accept sizing commands like width and height properly in the first place, trying to place them over a background image instead of styling them will ALWAYS fail miserably. As a rule of thumb, you shouldn't even be TRYING to dick with them in that way, particularly since if you're using dynamic fonts (which you should be) the element can resize without resizing that background-image. Admittedly, accessibility is an alien concept in webkit based browsers since they ignore the system metric and go out of their way to make it hard to change the default font size.
Here is the code: This works fine in Chrome and Safari however Firefox and IE shows its own select button.
Since I don't think you can use a background image that way in any non-webkit browser, methinks you're out of luck -- the dropdown arrow itself can't be turned off like that -- but on the whole that's just part of why screwing around with the appearance of form elements is the road to failure and shouldn't even be attempted in the first place. (and why people load up their pages with endless javascript crap for NOTHING apart from some gee ain't it neat BS just to pull off what you're asking). In fact, I'm a bit surprised this works in webkit, since appearance:none is supposed to make the dropdowns match the OS styling instead of the browser's styling... it most certainly shouldn't be killing the dropdown arrow/button. In fact, I'd go so far as to say the behavior you are seeing, no matter how much you desire it, is in fact the incorrect one. Of course in IE and across browsers in general you're bound to have issues with trying to fix the width and height since those are not calculated the same in any browser (particularly in quirks mode thanks to omitting a doctype)... IE ignoring height and obeying line-height instead, FF being reverse, Opera using whichever is larger, and webkit -- well, don't even get me STARTED about their form asshattery. (which is why that stupid APPEARANCE property came into being in the first place -- to tell webkit to stuff it and behave like other browsers). Much less IE's EM based padding you have zero control over in addition to normal padding, FF's PX based padding you have zero control over in addition to normal padding, and of course Opera treating INPUT/SELECT just like they were simply display:inline-block; (which IMHO is the most rational/sensible of them!) My advice, stop trying to do goofy appearance overrides on form elements, or at least don't do anything more complex than playing with border, background-color, border-radius and box-shadow. It's bad accessibility, a waste of code, and completely impractical cross-browser.
Yes, maybe using it as a background might night be right, which worked for Chrome and Safari so I hoped I could find a way to do that for Firefox and IE. I think -moz-appearance:none; was used for this purpose but it doesn't work anymore on Firefox's new versions as on the internet there were lots of blogs which have pointed me to use -webkit-appearance: none; (worked well for Chrome and Safari) and -moz-appearance:none; for Firefox... However it doesn't really look bad on Firefox but I wish it wasn't that hard to make a simple form crossbrowser.
add the following to see what happens: select.select { position: absolute; overflow: hidden; width: 234px; height: 30px; ..... } and use as a class: <select class="select" name="contact">