Degrading -webkit-text-security
css, html
Solution
This was pretty quick and dirty but it works.
<html>
<head>
<style>
input{
-webkit-text-security:square;
text-security:square;
}
</style>
<script>
window.onload = function(){
init();
}
function init(){
var x = document.getElementsByTagName("input")[0];
var style = window.getComputedStyle(x);
console.log(style);
if(style.webkitTextSecurity){
//do nothing
}else{
x.setAttribute("type","password");
}
}
</script>
</head>
<body>
<div id="di">
<input/>
</div>
</body>
Tested in chrome and firefox, I'm on linux so I can't test in IE. Jsfiddle here.
Problem
NOTICE: If you are intereseted on implementing text-security feautures, I've developed a jQuery plugin to accomplish this. I'm using `text-security` to style inputs: ``` input.square-password { -webkit-text-security: square; } ``` In web browsers that dont support `text-security`, password is just shown (no asterisks (****)). I'm looking forward to degrade this functionality on browser that don't support them, by using `text-security` when is available or using standard asterisks. The input HTML is: ``` <input class="square-password textbox" name="paymentpassword" /> ``` I tried adding a `type="password"` attr: ``` <input type="password" class="square-password textbox" name="paymentpassword" /> ``` But it overwrites `text-security` even on browsers that do support it. Any workarounds? Is it posible to set asterisks to the input via `CSS` (no type="password")? EDIT: text-security seems only supported by webkit. EDIT 2: inputs setted as `type="password"` can't be styled with text-security. Not even with `!important` (type="email" does) EDIT 3: @ryan answer works fine on: - Firefox - Chrome - Opera Can't change input type in IE8?