styleing password

by estelle

HTML

<p><input type=text /></p>
<p><input type=text /></p>
<p><input type=text /></p>
<p><input type=text /></p>

<p><input type=password /></p>
<p><input type=password /></p>
<p><input type=password /></p>
<p><input type=password /></p>

<div class="important">
<p><input type=text /></p>
<p><input type=text /></p>
<p><input type=text /></p>
<p><input type=text /></p>
    
<p><input type=password /></p>
<p><input type=password /></p>
<p><input type=password /></p>
<p><input type=password /></p>
</div>

<p>If this isn't working in your Webkit browser it is because the User Agent stylesheet has the following code:</p>
<pre>input[type="password"] { -webkit-text-security: disc !important;}</pre>
<p>while you can overwrite CSS in your UA StyleSheet, you can't overwrite an !important in your UA CSS</p>

CSS

p:nth-of-type(4n) input{-webkit-text-security:circle;}
p:nth-of-type(4n+1) input{-webkit-text-security:none;}
p:nth-of-type(4n+2) input{-webkit-text-security:square;}
p:nth-of-type(4n+3) input{-webkit-text-security:disc;}


.important p:nth-of-type(4n)  input[type]{ -webkit-text-security: circle !important;}
.important p:nth-of-type(4n+1) input[type]{-webkit-text-security:none  !important;}
.important p:nth-of-type(4n+2) input[type]{-webkit-text-security:square  !important;}
.important p:nth-of-type(4n+3) input[type]{-webkit-text-security:disc  !important;}