如何将输入文本框样式更改为线条？

Question

在我的表单中，我有三个输入字段名称、电子邮件、手机，但我想更改输入文本框，例如 -

 name :  _____________
email:  _____________
mob  :  _____________

原文由 nectar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在你的 CSS 中：

 input[type=text] {
    background: transparent;
    border: none;
    border-bottom: 1px solid #000000;
}

从这里您可以使用填充来将实际的文本条目放置在您想要的位置。例如，要使线条在实际输入区域的任一侧延伸 5 个像素：

     padding: 2px 5px;

原文由 Matthew Scharley 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

如果你也想在 ie6 中这样做，你可以使用带有背景位置的 bg 图像

.

 input{
    background:url(bg-dot.jpg) repeat-x center bottom;
    border:none;
    padding:2px 2px;
}

所以对于所有支持 ie6 的浏览器，你应该使用它。

原文由 Kali Charan Rajput 发布，翻译遵循 CC BY-SA 2.5 许可协议