Html 只有底部边框的文本框

Textfield with only bottom border

提问by Rust

How can I create a Text field that has a transparent or no background, no top,left and right border?

如何创建具有透明或无背景、无顶部、左侧和右侧边框的文本字段？

I am only using CSS and HTML.

我只使用 CSS 和 HTML。

回答by JunM

Probably a duplicate of this post: A customized input text box in html/html5

可能是这篇文章的副本：html/html5 中的自定义输入文本框

input {
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 1px solid black;
}

<input></input>

回答by Douglas Denhartog

See this JSFiddle

看到这个JSFiddle

 input[type="text"]
    {
        border: 0;
        border-bottom: 1px solid red;
        outline: 0;
    }

<form>
        <input type="text" value="See! ONLY BOTTOM BORDER!" />
    </form>