I visited a question posted on the Stack Exchange Google+ account and happened to get the newsletter registration prompt, which appears to have a styling issue in the email field:

newsletter prompt with wonky email field

The quick fix would be for the two fields to just have the same width (149px vs 200px), but it probably also makes sense at this point to just do away with the pseudo placeholders and just use the placeholder attribute universally, with a polyfill for legacy browsers.


Besides the placeholder being on the submit (which caught my interest in the first place, and got me looking at other newsletter subscription paths), the anonymous newsletter subscription code was broken even harder. All those subscription forms now have a placeholder only (no custom overlay), which solves a lot of related design bugs as well.


Looked at the code.

<form id="anon-newsletter-form">
    <input type="email" class="actual-edit-overlay" style="opacity: 1; position: absolute; color: black; -webkit-text-fill-color: black; width: 149px; height: 16px; line-height: normal; font-family: Arial; font-size: 13px; text-align: start; border: 2px inset rgb(136, 136, 136); background-color: white;" disabled="disabled">
    <input type="email" id="newsletter-email-input" class="" style="opacity: 1; z-index: 1; position: relative;">
    <input type="submit" value="Subscribe" placeholder="email address" id="newsletter-email-submit">            

It looks like they have two boxes to give it an effect... I don't know why they don't use CSS. They most likely can accomplish the same thing in pure CSS.


It seems to be fixed now, can anyone repo this?

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .