只有底部边框的输入文本字段答案

【问题标题】：Input text field with only bottom border只有底部边框的输入文本字段
【发布时间】：2016-09-24 17:30:44
【问题描述】：

如何设置文本 input 字段的样式以使其只有一个像这样的 border-bottom？

预期文本Input 字段

【问题讨论】：

【解决方案1】：

对 chrome 使用 outline:0.. 然后随意设置 border-bottom

input {
  outline: 0;
  border-width: 0 0 2px;
  border-color: blue
}
input:focus {
  border-color: green
}

&lt;input placeholder="Text" type="text" /&gt;

【讨论】：

这里的问题是，如果你这样做，你可能会破坏可访问性标准。来自文档：“为大纲分配 0 或无值将删除浏览器的默认焦点样式。如果可以与之交互的元素，则它必须具有可见的焦点指示器。如果删除了默认焦点样式，请提供明显的焦点样式。” developer.mozilla.org/en-US/docs/Web/CSS/…
@MicahBales 你可以用这个来修复：input:focus { border-color: green; outline: 1px dotted #000 //whatever you like }

【解决方案2】：

试试这个

.inp {
    border:none;
    border-bottom: 1px solid #1890ff;
    padding: 5px 10px;
    outline: none;
 }

[placeholder]:focus::-webkit-input-placeholder {
    transition: text-indent 0.4s 0.4s ease; 
    text-indent: -100%;
    opacity: 1;
 }

&lt;input class="inp" placeholder="What needs to be done??"/&gt;

【讨论】：

@dippas 您可以添加更多浏览器 CSS 扩展，例如 Mozilla CSS extensions

【解决方案3】：

input {
    border: 0;
    outline: 0;
    border-bottom: 2px solid blue;
}

【讨论】：

【解决方案4】：

#input_Id{
   border:0px;
   border-bottom:2px solid #eee;
}

【讨论】：

【解决方案5】：

input {
  border: 0;
  outline: 0;
  border-bottom: 2px solid #03a8f45e;
  font-size: 1.4rem;
  color: #ccc;
        
}

&lt;input placeholder="Enter search query" type="text" name="fname" autofocus /&gt;

【讨论】：