[分享]css取消文本框边框

CSS取消文本框边框在设计网站表单时，我们可能会需要取消文本框的边框，或者仅设置底部边框，以达到更美观的效果。首先，我们需要在CSS文件中使用以下代码来完全取消文本框的边框：input, input{...

CSS取消文本框边框

在设计网站表单时，我们可能会需要取消文本框的边框，或者仅设置底部边框，以达到更美观的效果。

首先，我们需要在CSS文件中使用以下代码来完全取消文本框的边框：

input[type="text"], input[type="password"]{
    border: none;
}

如果需要仅设置底部边框，我们可以使用以下代码：

input[type="text"].border-bottom, input[type="password"].border-bottom{
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid black;
}

在HTML中，我们只需要在相应的文本框中添加class="border-bottom"即可。