718847 - Default background causes weird view for input on ask.com

Status: RESOLVED INCOMPLETE

(Firefox for Android Graveyard :: General, defect)

Description

[Martijn Wargers (dead)]

On http://ask.com you'll notice that inside the blue bordered box, there is something that looks like an extra border at the top.

That site has a blue bordered div, with inside it a text input which has the css for the border-width set to 0px.
And that site assumes the default background color for text inputs is white, so you wouldn't get to see the gradient so out of place in this case.

The stock browser doesn't have this problem, that seems to use just a white background for text inputs.

Comment 1

[Doug Turner (:dougt)]

screenshot?

Comment 2

[Martijn Wargers (dead)]

Attachment: Screenshot from fennec on ask.com

Comment 3

[Martijn Wargers (dead)]

Attachment: Screenshot from stock browser on ask.com

Comment 4

[Doug Turner (:dougt)]

still a problem?  what about on maple?

Comment 5

[Martijn Wargers (dead)]

This is a styling problem, not a graphics problem.

Comment 6

[Mark Finkle (:mfinkle) (use needinfo?)]

Firefox will add a small background gradient to all textboxes. The textbox here has a large height, so you see more of the gradient.

We can talk to Madhava and Ian about changing/removing the gradient.

Comment 7

[Kevin Brosnan [Ex-Mozilla]]

This should have been minused. correcting that

Comment 8

[dotnetCarpenter]

I got the same issue. Default styling can NOT be overruled or cascaded.
I've made a simplified version with break point at 649px that visualize the issue.
Test case: test.it-kollektivet.dk/search.htm
The input[type="text"] has a -moz-appearance:none; rule but it's ignored by Firefox.

Real case: http://www.pragmaticcoach.dk/

Comment 9

[dotnetCarpenter]

Attachment: Firefox 21.0 for Android adds gradient background to input type=text

We need a way to remove the default styling of input elements in Firefox. -moz-appearance:none; could be one way to achieve this.

Comment 10

[Wesley Johnston (:wesj)]

This is just a background image. You can remove it by setting background-image: none; on your input. But we're going to remove it soon so that you don't have to.

Comment 11

[dotnetCarpenter]

thanks Wesley. it's not currently possible to check because remote debugging doesn't give access to inspecting elements. so your answer was most timely.

Comment 12

[pancake]

Looks like using 'input { background: white; }' removes the gradient

Comment 13

[BMO Automation]

We have completed our launch of our new Firefox on Android. The development of the new versions use GitHub for issue tracking. If the bug report still reproduces in a current version of [Firefox on Android nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix) an issue can be reported at the [Fenix GitHub project](https://github.com/mozilla-mobile/fenix/). If you want to discuss your report please use [Mozilla's chat](https://wiki.mozilla.org/Matrix#Connect_to_Matrix) server https://chat.mozilla.org and join the [#fenix](https://chat.mozilla.org/#/room/#fenix:mozilla.org) channel.