I'm using \[code\]text-security\[/code\] to style inputs:\[code\]input.square-password { -webkit-text-security: square; }\[/code\]In web browsers that dont support \[code\]text-security\[/code\], password is just shown (no asterisks (**)).I'm looking forward to degrade this functionality on browser that don't support them, by using \[code\]text-security\[/code\] when is available or using standard asterisks.The input HTML is:\[code\]<input class="square-password textbox" name="paymentpassword" />\[/code\]I tried adding a \[code\]type="password"\[/code\] attr:\[code\]<input type="password" class="square-password textbox" name="paymentpassword" />\[/code\]But it overwrites \[code\]text-security\[/code\] even on browsers that do support it.Any workarounds? Is it posible to set asterisks to the input via \[code\]CSS\[/code\] (no type="password")?EDIT: text-security seems only supported by webkit.EDIT 2: inputs setted as \[code\]type="password"\[/code\] can't be styled with text-security. Not even with \[code\]!important\[/code\] (type="email" does)EDIT 3: @ryan answer works fine on:
- Firefox
- Chrome
- Opera