如何设置css3中placeholder的字体颜色

2025-04-06 14:15:08
推荐回答(2个)
回答1:

纠正一下,,

placeholder是HTML5的新属性,并不是CSS3,,,CSS3和CSS2都是一样的,是在里,或者CSS文件里,或者style=""这里面的。


修改颜色,,这个网上倒是有几种办法,

一,使用伪类:

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #f00;  
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #f00;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #f00;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #f00;
}

二是使用JS来替换掉占位符:

$('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });
    
   CSS:
   form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc */
}

三就是用最常用的onfocus:

this.value='';" style="color: #f00;"/>

回答2:

placeholder是HTML5的新属性,并不是CSS3,,,CSS3和CSS2都是一样的,是在里,或者CSS文件里,或者style=""这里面的。
一,使用伪类:
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #f00;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #f00;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #f00;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #f00;
}

二是使用JS来替换掉占位符:
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});

CSS:
form .placeholder {
color: #222;
font-size: 25px;
/* etc */
}

三就是用最常用的onfocus:

1
2