css在不同的输入类

时间:2012-07-22 20:50:30

标签: html css class error-handling settings

您好我有以下问题:

我检查我的表单是否有一些php错误消息。

如果没有错误,我只需要设置我的CSS:

.wrapper #frame form fieldset ul input {
    color: #f23;
    font-size: 10px;
    height: 18px;
    padding-left: 5px;
    margin-top: 3px;
    outline:none;
}

和我的焦点设置:

.wrapper #frame form fieldset ul input:focus{
    color:#fff;
    font-weight: bold;
    border: 2px solid #fff;
}
好的,现在我改变了这一行:

<input type="text" id="normal" name="1" value=""/>

添加错误类:

<input class="err" type="text" id="normal" name="1" value=""/>

问题是我的设置仅针对输入字段中的课程详细信息而不是我的焦点设置:

.err {
    color: #444444;
    font-size: 10px;
    width: 180px;
    height: 18px;
    padding-left: 5px;
    outline:none;   
    background-image: url(../images/error.png);
}
.err input:focus{
    color:#f23;
    font-weight: bold;
    border: 2px solid #f23;
}

所以如果有人能告诉我为什么这不起作用我真的很感激。非常感谢。

1 个答案:

答案 0 :(得分:14)

您的HTML中有一个error课程,而您在CSS中将课程设置为err;如果你一直使用相同的名字(无论你选择哪个),它都应该有用。

您的当前 HTML:

<input class="error" type="text" id="normal" name="1" value=""/>

...和CSS:

.err {
    color: #444444;
    font-size: 10px;
    width: 180px;
    height: 18px;
    padding-left: 5px;
    outline:none;   
    background-image: url(../images/error.png);
}
.err input:focus{
    color:#f23;
    font-weight: bold;
    border: 2px solid #f23;
}

此外,在您的CSS中,您选择的input是具有err类名的元素的后代,而不是input元素 with 那个类名。所以,你应该使用类似的东西:

<input class="err" type="text" id="normal" name="1" value=""/>

input.err {
    color: #444444;
    font-size: 10px;
    width: 180px;
    height: 18px;
    padding-left: 5px;
    outline:none;   
    background-image: url(../images/error.png);
}
input.err:focus{
    color:#f23;
    font-weight: bold;
    border: 2px solid #f23;
}