remove Firefox arrow on drop down field
The first image shows how the drop down looks in Firefox (version 31). The second image shows how it looks in Chrome.
How can I remove the Firefox generated arrow that appears so that it looks the same as the Chrome version?
Dude bit hard to say without seeing your css.. but just a case of putting "display: none;" in the right spot to hide the browser default..
When you say "drop-down" do you mean a SELECT? If so, you don't. SELECTS in most browsers are not meant to receive a whole lot of style and things like the select button itself are hard-coded in the browser; It's also why I'm not a big fan of screwing with styling of form elements beyond some simple padding and/or border changes as you get to things like selects and radio buttons, and you can kiss off "consistent appearance" scross-browser... this is by design from an accessibility front, and why what Chrome often lets you do to them is just more "accessibility, what's that?" pissing on usability. NEVER get me started about what Blink, Webkit or KHTML (same thing treally) does with forms.
I'm not even sure how you got that image behind it in the first place; again as code-tard said, we really need to see the code... and I'd say we need to see the HTML and the CSS -- but really what you are trying to do IE, FF, iCab and "Real" Opera can't do... nor are they ever likely to do.
Problem is, Chrome doesn't display a default arrow for select fields (at least I don't think so). That is why the custom arrow is needed (or Chrome wouldn't have an arrow at all).
<td class="label"><label for="pa_buying-options-custom">Buying Options</label></td>
<td class="value"><select id="pa_buying-options-custom" name="attribute_pa_buying-options-custom">
<option value="">Choose an option…</option>
<option value="concept_plan" >Concept Plan - $49.99</option>
<option value="1_copy_study_set" >1 Copy Study Set - $149.99</option>
<option value="6_copy_full_set" >6 Copy Full Set - $499.99</option> </select>
border-left: 1px solid #dadada;
It seems to me that you are trying to buck the way the browsers are written to perform. If so, I'd suggest that if you don't like the way a particular browser works, don't use it! Same applies to the users. Let them choose. It looks like what you are doing is an utter waste of time (IMHO).
I get your point. However, the problem is, when I remove the custom arrow, Chrome doesn't show an "arrow" at all (just FF and IE seem to generate their own arrow).
FWIW, Chrome absolutely has an arrow on <select>s by default. It's a little "upside down triangle"-type arrowhead. If it's missing from your page/form you have something else going on.
Here's 2 screenshots of your HTML in Chrome with no styling applied:
Thanks for the replies everyone. Must be another issue then (regarding the arrow not showing in Chrome). I'll figure it out. Thanks again.
Unless you are using one of those goofy preprocessors, do we see a problem here?
You're missing a }
Your markup is setting off warning flags -- like what the devil makes a label and input tabular data? That's tables for layout, a busted-ass code-bloat bit of nonsense. (that it's shocking anyone still uses, much less defends the practice of)
You also aren't showing us the markup where that arrow class is being applied, and generally speaking that CSS is no winner either with the inaccessible absurdly undersized px metric fonts, goofy "pointer-event" thing guaranteed to make life harder, lack of condensed properties, goofy webfont with zero fallbacks in the stack, inconsistent use of height vs. line-height...
I'd really need to see more of the page to weigh in with a solution, but from the little of it you've shown I suspect you're doing things all wrong, and using possibly two times or more code than necessary.
Actually, it's not my code (it's a Wordpress template). I'm sure you're correct (as most WP templates are "bloated").
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)