增加密码输入字符大小而不影响占位符答案

【问题标题】：Increase password input character size without affecting placeholder增加密码输入字符大小而不影响占位符
【发布时间】：2013-11-16 11:17:47
【问题描述】：

是否可以在不影响占位符的情况下增加 HTML 密码输入的字体大小？换句话说，我想放大密码符号（子弹）的大小。

当然，我尝试增加input[type="password"] 的font-size。这工作得很好，但它也使我的占位符字体增加：

是否有解决办法来防止我的占位符受到影响？我知道您可以使用 ::-webkit-input-placeholder 或 :-moz-placeholder 专门针对他们 - 但这会在全球范围内应用它并且基本上违背了我的问题的目的。

欢迎任何 HTML、CSS 或 Javascript/jQuery 解决方案。

【问题讨论】：

我可能误解了您的需求，但为什么不将 input 包装在 span 和样式 span.someClass ::-webkit-input-placeholder 中？
我认为在类后面使用诸如::-webkit-input-placeholder 之类的伪类是不好的做法/容易出错？
@lonesomeday 它可以工作，但看看占位符如何变得有问题：jsfiddle.net/ZXLQd
只是不要使用占位符而不是标签，你一开始就不会产生这个问题。
这有点不切实际。你更倾向哪个？ imgkk.com/i/3xjx.jpg 与 imgkk.com/i/uc7r.jpg

标签： javascript jquery html css

【解决方案1】：

我没有找到您问题的准确解决方案。但是我用一些 javascript/jquery 代码来解决你的问题。

HTML

 <input id="txtInput" type="password" placeholder="Passowrd" onchange="CheckModification();" onpaste="this.onchange();" oninput="this.onchange();"/>

jQuery

$(document).ready(function(){
    $('#txtInput').focus(function () {
        if ($('#txtInput').val() == "") {
             $('#txtInput').css('font-size', '14px');
         }
         else {
             $('#txtInput').css('font-size', '24px');
         }
     });

     $('#txtInput').blur(function () {
         if ($('#txtInput').val() == "") {
             $('#txtInput').css('font-size', '14px');
         }
         else {
             $('#txtInput').css('font-size', '24px');
         }
     });
 });

function CheckModification(){
         if ($('#txtInput').val() == "") {
             $('#txtInput').css('font-size', '14px');
         }
         else {
             $('#txtInput').css('font-size', '24px');
         }
     }

Try This

希望对你有帮助。

【讨论】：

这不是最干净的解决方案，但它有效 - 这对我来说已经足够了！