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

Posted 2023-03-05

【中文标题】只有底部边框的输入文本字段

【英文标题】：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

<input placeholder="Text" type="text" />

【讨论】：

这里的问题是，如果你这样做，你可能会破坏可访问性标准。来自文档：“为大纲分配 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;
 

<input class="inp" placeholder="What needs to be done??"/>

【讨论】：

@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;
        

<input placeholder="Enter search query" type="text" name="fname" autofocus />