Wrong vertical padding of placeholder in MS Edge

By design Issue #7434576

Details

Created
May 4, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Browse a jsFiddle example:

  1. in MS IE;
  2. in MS Edge.
    You will see too narrow placeholder at last.

Attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Brad E.”

  • Hello,

    The only real difference I see when using this repro is a yellow input field for the zip code with red text in Edge & IE.  In chrome this does not happen. The placeholder itself seems to be the same aside from the colors, though. I do not see a excessively narrow placeholder.

    All the best,
    The MS Edge Team

  • different placeholder color and background in IE and Edge made me specially!
    its using diffrent css switch: pseudo-class in IE / pseudo-element in Edge. Chrome using another pseudo-element ::-webkit-input-placeholder

    look at attached jpg: why placeholder in IE not fill input field in fall (as made IE)?
    this is really destroy page design, i think

  • oh, sorry! why placeholder in Edge not fill input field in full?

  • Microsoft Edge Team

    Changed Assigned To to “Rick J.”

    Changed Assigned To to “Bogdan B.”

    Changed Status to “By design”

  • This is by design.

     

    Pseudo-classes like :hover or :active do not change the element being matched, they just add a condition to the match. In IE case, you would select the <input> when it was showing a placeholder.

     

    However, it was discovered this was not how Chrome worked. They used a pseudo-element which is a virtual <span> around the placeholder text. Now we match this, and replaced the pseudo-class by a pseudo-element in this case.

You need to sign in to your Microsoft account to add a comment.

Sign in