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

Question

如何设置文本

input

字段的样式，使其只有像这样的

border-bottom

？

预期文本

Input

字段

Answer 1

使用

outline:0

，然后设置

border-bottom

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

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

Answer 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?👻"/>

Answer 3

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

Answer 4

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

Answer 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 />

Answer 6

将以下代码添加到您的 css 文件中。它将自动更改应用程序中所有输入框的样式。

input {
    border: 0;
    outline: 0;
    border-bottom: 2px solid #1890ff;
}

如果您只需要为输入框应用样式，请使用以下类声明，

.inputbox {
    border: 0;
    outline: 0;
    border-bottom: 2px solid #1890ff;
}

<input class="inputbox" placeholder="Enter a number"/>

Answer 7

.field {
      width: 100%;
      position: relative;
      border-bottom: 1px solid lightgray;
      border-radius: 0px;
      font-size: 14px;
      font-weight: bold;
    }