[分享]css写多个文本框样式

CSS是现代网页设计中不可或缺的一部分。在设计表单等需要输入文本的界面时，我们经常需要对文本框进行样式设计以达到更好的用户体验效果。下面，我们介绍一下CSS如何写多个文本框样式。/普通文本框样式/ i...

CSS是现代网页设计中不可或缺的一部分。在设计表单等需要输入文本的界面时，我们经常需要对文本框进行样式设计以达到更好的用户体验效果。下面，我们介绍一下CSS如何写多个文本框样式。

/*普通文本框样式*/
input[type="text"] {
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 5px;
}

/*密码文本框样式*/
input[type="password"] {
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 5px;
}

/*文本框获取焦点样式*/
input[type="text"]:focus, input[type="password"]:focus {
    outline: none;
    border-color: #5c94ff;
    box-shadow: 0 0 5px rgba(92,148,255,.5);
}

/*不可编辑文本框样式*/
input[type="text"][readonly] {
    background-color: #f7f7f7;
    color: #999;
}

/*默认值文本样式*/
input[type="text"][value="默认值"] {
    color: #999;
}

/*禁用文本框样式*/
input[type="text"]:disabled {
    background-color: #eee;
} 

上述代码中，我们定义了多个文本框样式，并针对不同的情况进行了区分。例如普通文本框、密码文本框、获取焦点的文本框、不可编辑文本框、默认值文本框和禁用的文本框等。

通过这种方式处理文本框样式，可以使得界面更加美观、实用。同时，也方便了日后的维护工作。