html - CSS 在为空时绘制必填字段

Question

我想使用 CSS 在表单中绘制必填字段，以便用户知道必须填写它们。一旦字段具有值，我也希望这幅画消失。

这是我尝试过的一个例子：

CSS

input[type="text"]{
    display:block;
}
input.required[value=""] {
    background-color:yellow;
}

HTML

Name:<input class="required" type="text" name="Name" value="" size="20">
Phone:<input type="text" name="Phone" value="" size="20">

必填字段绘制得很好，问题是一旦字段具有值，颜色就不会消失。

有没有办法让它与纯 CSS 一起工作？

score 2 · Accepted Answer

使用新浏览器：使用:invalid伪选择器和required属性。在较旧的浏览器中，您将需要 JavaScript。

如果您的框架妨碍了添加 HTML5 属性，我会质疑框架（或查看更新版本），但如果需要，您始终可以使用 shim 与（假设 jQuery）类似的东西：

$(function() {
    $(".required.").attr("required", "true");
});

不太理想，但足够简单，不会污染系统。

1 回答 1