1004130 - Firefox 29.0 the ::-moz-placeholder css pseudo-element selector is not honored for <input> with type="number"

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect)

Description

[Samuel Smith]

Attachment: 2014-04-30_1451.png

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0 (Beta/Release)
Build ID: 20140421221237

Steps to reproduce:

http://jsfiddle.net/s2e7T/1/
Define a page with an input element of type="number", then a css selector like:

input::-moz-placeholder { color: blue; }


Actual results:

The input with type="number" will not have it's styles effected by the css selector.  Note that changing the input's type to type="text" will cause the css selector to apply.  This was working prior to Firefox 29.0


Expected results:

The input with type="number" should have had the css selector apply to it.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Fun.  The issue is that all the ::-moz-placeholder support is in the text control frame.

jwatt, would it make sense to pass the parent of mContent in nsTextControlFrame::CreateAnonymousContent for the element whose rules should apply if we're the anon textframe inside a number control?

Comment 3

[Darren Cook]

Confirmed the bug is still there in Firefox 34.
Also this is Linux Mint, 64-bit, so not just affecting Windows.

Comment 4

[Anthony Ricaud (:rik)]

I'm wondering if this could be a good first bug?

Comment 5

[Boris Zbarsky [:bzbarsky]]

Unclear.  If the proposed approach from comment 1 works, then it might be.  If it turns out to not work, then probably not.

Comment 6

[Nicolas Bouvrette]

Could someone please fix this bug? It's been reported over a year and a half ago and is still very annoying.

Comment 7

[Caleb Jacob]

Still seeing this bug in 45.0.1 on OSX.

Comment 8

[diegopego86]

Any plans to fix this issue??? It seems that it's been for ages and no solution yet. Testing on 46.1 and nothing. Check here: http://codepen.io/anon/pen/yEtFB

Comment 9

[marcosperezgude]

Is this a joke? 2 years and not solution yet. A simple placeholder. Please, fix it in next versions of firefox. I need to use input type number in my projects, with a javascript that detects firefox to replace the input with a type text. Very weird and buggie.

Comment 11

[marcosperezgude]

Come on! When we will know something about this bug? Two years after and still no solution!

Comment 12

[Jonathan Watt [:jwatt]]

Attachment: patch

I'd really prefer not to have special case number control code in nsTextControlFrame.cpp, but the overhaul of the number code doesn't look like it's going to happen soon.

Comment 13

[Boris Zbarsky [:bzbarsky]]

Comment on attachment 8775170 [details] [diff] [review]
patch

>+    <!-- div to cover the right hand portion of the control including the spin buttons -->
>+    <div style="display:block; position:absolute; background-color:black; width:200px; height:100px; top:0px; left:100px;">

This seems a bit fragile; it's assuming that 100px is far enough from the left that it will show the text but hide the spinbuttons...  Also assumes things about the height of the control.

Why can't this just use "-moz-appearance: textfield" to hide the spinbuttons?

r=me with that.  If -moz-appearance doesn't work for some reason, please let me know and we can talk about a less-fragile way to cover up the spinbuttons with a div...

Comment 14

[Jonathan Watt [:jwatt]]

We could use "-moz-appearance: textfield" to hide the spinbuttons, but that leaves the issue that the width of text and number inputs is not the same.

Comment 15

[Jonathan Watt [:jwatt]]

Err, which is so very hard to override with a style rule. </sarcasm at self>

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/d539c846b609
Implement ::-moz-placeholder for <input type=number>. r=bz

Comment 17

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/d539c846b609

Comment 18

[Matt Pardini]

Has a new release broken the patch? Or is there some other reason this might not work as expected? I cannot get firefox 53.02 to render this correctly. Page loads WITHOUT styles applied to input::-moz-placeholder, but when I open the inspector and view the DOM, the styles apply as expected and remain as expected until the page reloads (at which it loads without styles again until the inspector is opened again).

Any thoughts or additional work-arounds?

Comment 19

[Boris Zbarsky [:bzbarsky]]

Matt, the original testcase in this bug (<http://jsfiddle.net/s2e7T/1/>) seems to work fine with Firefox 53.0.2.  If you have a link to a testcase that is not working, can you please file a separate bug on it, with a link to the testcase, and cc me?  I will look into it.

Comment 20

[mmalerba]

Boris, it appears the most basic case works, but it quickly breaks when you try to change the placeholder color with a CSS class, check out: http://jsfiddle.net/cgz7Lqz8/

Comment 21

[chuloyo]

Bug still not fixed, as  mmalerba said. When we try to set a class through javascript it crash. This bug is very old ....

Comment 22

[Boris Zbarsky [:bzbarsky]]

Ah, broken on dynamic restyles.  Thank you, that's very helpful.  I filed bug 1368113 on that problem.

Comment 23

[allkhor]

Tested on Ubuntu 16.04.2 Firefox 54.0 x64. Maybe related: input:focus::-moz-placeholder{color: blue;} not work on input type="number", but work when type="text". Do i need open a new bug?

Comment 24

[Boris Zbarsky [:bzbarsky]]

That should have been fixed in bug 1368113, since :focus pretty much always involves a dynamic restyle.  Please check in a 55 beta build?  It works there for me.

Comment 25

[allkhor]

Thanks Boris, in a 55 beta :focus::-moz-placeholder works as expected.