www.webdeveloper.com
Results 1 to 10 of 10

Thread: remove Firefox arrow on drop down field

  1. #1
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    356

    remove Firefox arrow on drop down field

    ff.jpg

    chrome.jpg

    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?

    Thanks.

  2. #2
    Join Date
    Jun 2014
    Location
    Cairns - Australia
    Posts
    78
    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..

  3. #3
    Join Date
    May 2014
    Posts
    900
    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.

    Which is why some people will throw javascript at the problem and put a div recreation OVER the select, but IMHO that's a total waste of time and effort -- just like what you're trying to do in styling a SELECT.
    Java is to JavaScript as Ham is to Hamburger.

  4. #4
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    356
    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).

    HTML Code:
    <tr>
    <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&hellip;</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>
    </td>
    <tr>
    Code:
    #pa_buying-options-custom {
    font-size: 12px;
    
    
    .avada-select-arrow {
    width: 35px;
    height: 34px;
    border-left: 1px solid #dadada;
    position: absolute;
    top: 1px;
    right: 3px;
    pointer-events: none;
    z-index: 10;
    font-family: 'FontAwesome';
    text-align: center;
    line-height: 31px;

  5. #5
    Join Date
    Mar 2012
    Posts
    1,507
    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).

  6. #6
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    356
    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).

  7. #7
    Join Date
    Oct 2013
    Posts
    484
    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:
    Attached Images Attached Images

  8. #8
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    356
    Thanks for the replies everyone. Must be another issue then (regarding the arrow not showing in Chrome). I'll figure it out. Thanks again.

  9. #9
    Join Date
    May 2014
    Posts
    900
    Code:
    #pa_buying-options-custom {
    font-size: 12px;
    
    
    .avada-select-arrow {
    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.
    Java is to JavaScript as Ham is to Hamburger.

  10. #10
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    356
    Actually, it's not my code (it's a Wordpress template). I'm sure you're correct (as most WP templates are "bloated").

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles