Open
Bug 1115623
Opened 10 years ago
Updated 2 years ago
[css-pseudo] Animation applied to ::placeholder not working
Categories
(Core :: CSS Transitions and Animations, defect, P5)
Tracking
()
UNCONFIRMED
People
(Reporter: rocky217.r, Unassigned)
References
Details
(Keywords: testcase)
Attachments
(1 file)
|
(deleted),
text/html
|
Details |
User Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36
Steps to reproduce:
Used the below css code, to apply the animation only to the placeholder of a textbox.
::-moz-placeholder {
color:blue;
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}
@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
Actual results:
No animation shown for the placeholder. Note that, if I try to apply the animation on the textbox, instead of only the placeholder, the textbox itself as well as the placeholder blink.
Expected results:
The animation should have been applied to the placeholder. The placeholder should blink.
Could you attach a minimal testcase, please.
Flags: needinfo?(rocky217.r)
Keywords: testcase-wanted
|
||
Comment 2•10 years ago
|
||
|
|
||
Updated•10 years ago
|
Blocks: 737786
Component: Untriaged → Layout: Form Controls
Keywords: testcase-wanted → testcase
Product: Firefox → Core
Version: 34 Branch → 19 Branch
|
|
||
Updated•10 years ago
|
Status: UNCONFIRMED → NEW
Ever confirmed: true
|
||
Comment 4•6 years ago
|
||
Are there any CSS specifications that says animation should be
supported on ::placeholder?
Does any other web browser ship support for this?
::placeholder is absent on CSSPseudoElement:
https://drafts.csswg.org/css-pseudo-4/#CSSPseudoElement-interface
which implies animation shouldn't be supported on it.
If you want this feature implemented in browsers you should
probably file a CSS spec issue first:
https://github.com/w3c/csswg-drafts/issues/new
Status: NEW → UNCONFIRMED
Component: Layout: Form Controls → CSS Transitions and Animations
Ever confirmed: false
Flags: needinfo?(rocky217.r)
Priority: -- → P5
Summary: Animation applied to placeholder not working → [css-pseudo] Animation applied to ::placeholder not working
|
||
Comment 5•5 years ago
|
||
Here is a simple example with transition: https://jsfiddle.net/ytmcfqrx/
❌ Transition not working in Firefox 67
✔️ Transition working in Chromium 75
✔️ Transition working in Safari 12
|
||
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•