logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$25
CSS problem in FireFox

This is a follow up to my last question, which you can see here:

http://www.wpquestions.com/question/showChronoLoggedIn/id/7944

I ended up using the solution here:

http://bavotasan.com/2011/style-select-box-using-only-css/

On a Mac, this looks great in Chrome, but the underlying arrow becomes visible in FireFox. See screenshot.

I had to shrink the select box. I am now using this CSS:



#sub-lead-announcement select {

   background: transparent;

   width: 110px;

   padding: 5px;

   font-size: 11px;

   line-height: 12px;

   border: 0;

   border-radius: 0;

   height: 24px;

   -webkit-appearance: none;

}

#sub-lead-announcement {

   width: 100px;

   height: 24px;

   overflow: hidden;

   background: url('/img/down_arrow_select.jpg') no-repeat right #ddd;

   border: 1px solid #ccc;

}


How do I get this to look good in all browsers?

This screenshot is from FireFox, where the underlying down arrow is visible, which is very ugly. In Chrome it is covered by the icon I am using, which is much more pretty.


This question has been answered.

attachment image asker uploaded image

Lawrence Krubner | 01/31/13 at 8:40pm Edit
Tutorial: How to assign prize money

Previous versions of this question: 01/31/13 at 9:25pm

(4) Responses

See a threaded view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    02/01/13
    2:34am
    Kiet Luong says:

    try to change width value of select box to 128px or more

  • avatar
    Last edited:
    02/01/13
    4:26am
    Arnav Joy says:

    try this

    #sub-lead-announcement select {
    

    
   background: transparent;
    

    
   width: 130px !important;
    

    
   padding: 5px;
    

    
   font-size: 11px;
    

    
   line-height: 12px;
    

    
   border: 0;
    

    
   border-radius: 0;
    

    
   height: 24px;
    

    
   -webkit-appearance: none;
    

    
}
    

    
#sub-lead-announcement {
    

    
   width: 100px;
    

    
   height: 24px;
    

    
   overflow: hidden !important;
    

    
   background: url('/img/down_arrow_select.jpg') no-repeat right #ddd;
    

    
   border: 1px solid #ccc;
    

    
}

  • avatar
    Last edited:
    02/01/13
    2:46am
    Kiet Luong says:

    you need to increase the width of the select box to push the down arrow to the right, and you will hide it away

  • avatar
    Last edited:
    02/01/13
    2:47am
    Kiet Luong says:

    remember change width of <select> tag only

This question has expired.



Lawrence Krubner, John Cotton, Christianto, Dbranes, Naveen Chand voted on this question.



Current status of this question: Completed



Please log in to add additional discourse to this page.





Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.