Better Looking Bullet Placeholders

A common pattern these days, is to put bullets as a field’s placeholder to indicate a credit card number, a discount or a password field. The problem is that, if you just put •••• •••• •••• ••••, the bullets end up too close to each other, so we need to add a bit of letter-spacing for these fields only.

Here’s a snippet of CSS that does just that:

input[placeholder*="••••"]::-webkit-input-placeholder {
    letter-spacing: .1em;
}

That selector looks for an input with a placeholder that contains four bullets in a row¹ and applies a bit of letter-spacing to it. There you have it. Better looking placeholders!