Question

我遇到输入字段背景颜色变化的问题。如果它是空的或已经在使用或我定义的其他规则，背景颜色应该改变。 Juts我需要一个简单形式的例子，如：

<form name="login" action="" method="post">
Username: <input type="text" name="username"><br />
<input type="submit" name="submit" value="Submit">
</form>

我想用PHP和CSS代码来做到这一点。随意使用div类和其他东西。

由于

Answer 1

您可以使用CSS3属性选择器执行此操作。例如，如果输入为空则背景为红色，否则为绿色。

input { background: green; }
input[value=""] { background: red; }

请注意，CSS3属性选择器与IE8及更低版本不完全兼容。所有其他现代浏览器都支持它们。

此外，如果您希望它动态更新（即，当用户在输入框中输入内容时从红色变为绿色），则必须使用Javascript。

Answer 2

我给你写了一个小例子

CSS

.placeholder {color:#aaa;}
input[type=text],
input[type=password] {
    background:#eee;
}
input[type=text]:focus,
input[type=password]:focus {
    background:#fff;
}

JS

$("#username").focus(function(){
    if($(this).val() == "Benutzername")
    {
        $(this).val("");
        $(this).removeClass('placeholder');
    }
});
$("#username").blur(function(){
    if($(this).val() == "")
    {
        $(this).val("Benutzername");
        $(this).addClass('placeholder');
    }
});

$("#password").focus(function(){
    if($(this).val() == "Passwort")
    {
        $(this).val("");
        $(this).prop("type", "password");
        $(this).removeClass('placeholder');
    }
});
$("#password").blur(function(){
    if($(this).val() == "")
    {
        $(this).val("Passwort");
        $(this).prop("type", "text");
        $(this).addClass('placeholder');
    }
});

HTML

<input id="username" type="text" class="placeholder" value="Benutzername" /><br />
<input id="password" type="text" class="placeholder" value="Passwort" />

在JSFiddle中查看它 http://jsfiddle.net/hk8k4vew/

根据PHP中的输入更改输入背景颜色

2 个答案:

CSS

JS

HTML