ძიება მხარდაჭერაში

ნუ გაებმებით თაღლითების მახეში მხარდაჭერის საიტზე. აქ არასდროს მოგთხოვენ სატელეფონო ნომერზე დარეკვას, შეტყობინების გამოგზავნას ან პირადი მონაცემების გაზიარებას. გთხოვთ, გვაცნობოთ რამე საეჭვოს შემჩნევისას „დარღვევაზე მოხსენების“ მეშვეობით.

ვრცლად

dropdown styling

  • 2 პასუხი
  • 6 მომხმარებელი წააწყდა მსგავს სიძნელეს
  • 7 ნახვა
  • ბოლოს გამოეხმაურა Kevin

Hi all

I have this search form on my website with 2 dropdowns (select)

i have styled these to get a customized look and this works in all desktop browsers: firefox, chrome, safari, opera, ie

also the mobile browsers (that i have been able to check): opera, dolphin, chrome, safari are looking as intended

BUT the mobile FIREFOX browser (i have it on galaxy note 2 but that shouldn't be different on other devices) does not show the correct results... i get my customized arrow but somehow the browser overrides the background settings etc because i still get the greyish background with the default arrow

also the text input box in the same form get a different styling (inside shadow etc.


dropdown 1 : class = uwpqsf_class tax-select-0 (=div) dropdown 2 : class = uwpqsf_class tax-select-1 (=div) inside these div's is the select

here's my css

.uwpqsf_class.tax-select-0, .uwpqsf_class.tax-select-1 {

       position: relative;

display:inline-block; } .uwpqsf_class select { background-color: #fff; margin-left:0 !important; margin-right: 0 !important; -webkit-appearance: none; /* gets rid of default appearance in Webkit browsers*/ -moz-appearance: none; /* Get rid of default appearance for older Firefox browsers */ -ms-appearance: none; /* get rid of default appearance for IE8, 9 and 10*/ appearance: none; *background-image:none; /* turn bg image for IE7 */ font-family: 'Open Sans', Arial, Helvetica Neue, sans-serif; font-size: 16px; font-weight: 300; line-height:normal; color: #111111; border: 1px solid #888888; !important; /*border*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; cursor: pointer; width: 100% !important; padding: 10px; text-indent: 1px; text-overflow: ""; } .uwpqsf_class.tax-select-0:after, .uwpqsf_class.tax-select-1:after {

       content:url('images/dropdown_arrow.png');
       position: absolute;
       top: 8px;
       right: 15px;
       pointer-events: none;

}


did i forget anything?

Is there a setting that i can use to get rid of the default styling ... and when not possible, enable to NOT show my styling just for the firefox MOBILE browser

Hi all I have this search form on my website with 2 dropdowns (select) i have styled these to get a customized look and this works in all desktop browsers: firefox, chrome, safari, opera, ie also the mobile browsers (that i have been able to check): opera, dolphin, chrome, safari are looking as intended BUT the mobile FIREFOX browser (i have it on galaxy note 2 but that shouldn't be different on other devices) does not show the correct results... i get my customized arrow but somehow the browser overrides the background settings etc because i still get the greyish background with the default arrow also the text input box in the same form get a different styling (inside shadow etc. dropdown 1 : class = uwpqsf_class tax-select-0 (=div) dropdown 2 : class = uwpqsf_class tax-select-1 (=div) inside these div's is the select here's my css .uwpqsf_class.tax-select-0, .uwpqsf_class.tax-select-1 { position: relative; display:inline-block; } .uwpqsf_class select { background-color: #fff; margin-left:0 !important; margin-right: 0 !important; -webkit-appearance: none; /* gets rid of default appearance in Webkit browsers*/ -moz-appearance: none; /* Get rid of default appearance for older Firefox browsers */ -ms-appearance: none; /* get rid of default appearance for IE8, 9 and 10*/ appearance: none; *background-image:none; /* turn bg image for IE7 */ font-family: 'Open Sans', Arial, Helvetica Neue, sans-serif; font-size: 16px; font-weight: 300; line-height:normal; color: #111111; border: 1px solid #888888; !important; /*border*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; cursor: pointer; width: 100% !important; padding: 10px; text-indent: 1px; text-overflow: ""; } .uwpqsf_class.tax-select-0:after, .uwpqsf_class.tax-select-1:after { content:url('images/dropdown_arrow.png'); position: absolute; top: 8px; right: 15px; pointer-events: none; } did i forget anything? Is there a setting that i can use to get rid of the default styling ... and when not possible, enable to NOT show my styling just for the firefox MOBILE browser

ყველა პასუხი (2)

wow... the css was not rendered very well :-) let's try again...


.uwpqsf_class.tax-select-0, .uwpqsf_class.tax-select-1 {

position: relative;

display:inline-block;

}


.uwpqsf_class select {

background-color: #fff;

margin-left:0 !important;

margin-right: 0 !important;

-webkit-appearance: none; /* gets rid of default appearance in Webkit browsers*/

-moz-appearance: none; /* Get rid of default appearance for older Firefox browsers */

-ms-appearance: none; /* get rid of default appearance for IE8, 9 and 10*/

appearance: none; *background-image:none; /* turn bg image for IE7 */

font-family: 'Open Sans', Arial, Helvetica Neue, sans-serif;

font-size: 16px;

font-weight: 300;

line-height:normal;

color: #111111;

border: 1px solid #888888; !important; /*border*/

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

cursor: pointer;

width: 100% !important;

padding: 10px;

text-indent: 1px;

text-overflow: ""; }


.uwpqsf_class.tax-select-0:after, .uwpqsf_class.tax-select-1:after {

content:url('images/dropdown_arrow.png');

position: absolute;

top: 8px;

right: 15px;

pointer-events: none;

}

Please file a bug and attach a test case or a link to a site that displays this issue.

https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox%20for%20Android&component=General