Closed Bug 1422185 Opened 8 years ago Closed 5 years ago

Date and Time Inputs show default placeholder text in solid black and cannot be formatted by CSS pseudo-elements ::placeholder/::-moz-placeholder

Categories

(Core :: Layout: Form Controls, defect, P3)

Product:
Core
Component:
Layout: Form Controls
Version:
57 Branch
Type:
defect

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: plutoisaplanet1, Unassigned)

References

(Blocks 1 open bug)

Details

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0 Build ID: 20171112125346 Steps to reproduce: Create a date or time input. Attempt to set a placeholder HTML attribute. Then attempt to format placeholder text with CSS pseudo-elements ::-moz-placeholder or ::placeholder. Actual results: The date and time inputs have read-only placeholders in solid black. Expected results: At a minimum, a developer should be able to format the default placeholder via CSS pseudo-elements ::placeholder or ::-moz-placeholder. Right now the way to format the placeholder is provided by formatting the input element itself. Formatting the input element should only apply to the placeholder text upon entering any data to the input. At the point, the semantic meaning of the placeholder text changes to become part of the data itself. By specifying the type of an input element to be date or time, it's understandable that the HTML placeholder attribute can not be set as this is part of the functionality of those inputs. However something else that should also be changed is the default formatting of the placeholder, which should be opacity: 0.54.
Component: Untriaged → Layout: Form Controls
Product: Firefox → Core
Priority: -- → P1
Priority: P1 → P3
Blocks: css-pseudo-4

In addition to the pseudo-element ::placeholder being affected, this also affects the pseudo-class :placeholder-shown. I've created a HTML/CSS snippet as an example: https://jsfiddle.net/rw7m2nab/

After checking cross-browser, it appears that no major browser supports this functionality and the default "blank" appearance showing the format of the input is not considered a placeholder. Instead, upcoming pseudo-class :blank should be used once CSSWG Selectors Level 4 is finalized and implemented by browsers.

Status: UNCONFIRMED → RESOLVED
Closed: 5 years ago
Resolution: --- → INVALID

Note that the :blank pseudo-class only targets the input field itself, not its placeholder. The issue with the date and time input fields is that their empty texts are treated the same way as normal input text and not like actual placeholders.

So yes, that pseudo-class will let you style the placeholders, though just because of that discrepancy to other input types.

Sebastian

You need to log in before you can comment on or make changes to this bug.