css在表单中添加横线

CSS作为网页美化的重要工具，可以让我们在表单中添加各种样式，下面介绍一下如何在表单中添加横线。

form input[type=text], form input[type=password], form textarea {
    border: none;
    border-bottom: 1px solid #cccccc;
}

在这个代码中，我们使用了CSS选择器来选定表单中的文本输入框和文本域，然后将它们的边框设为无，只添加一个底部边框，颜色为灰色。

当然，我们也可以添加其他样式来优化表单的外观：

form input[type=text], form input[type=password], form textarea {
    border: none;
    background-color: #f2f2f2;
    padding: 10px;
    font-size: 16px;
    border-bottom: 1px solid #cccccc;
}

在这个代码中，我们在输入框和文本域中添加了一些额外的样式，如背景颜色、内边距、字体大小等，让表单看起来更加美观。

CSS不仅可以让表单更加美观，还能为表单添加交互特效。比如说，我们可以在输入框获得焦点或鼠标移入时改变其样式：

form input[type=text]:focus, form input[type=password]:focus, form textarea:focus {
    border-bottom: 2px solid #019fde;
}
form input[type=text]:hover, form input[type=password]:hover, form textarea:hover {
    border-bottom: 2px solid #cccccc;
}
    

在这个代码中，我们对输入框和文本域添加了焦点状态和鼠标悬停状态的样式，并改变了其底部边框的颜色和宽度，让它们更加明显。

总之，CSS可以为表单添加各种各样的样式和特效，让表单更加美观、易于操作，提高用户体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！