答案 0 :(得分:17)
将outline:0
用于Chrome ..然后根据需要设置border-bottom
input {
outline: 0;
border-width: 0 0 2px;
border-color: blue
}
input:focus {
border-color: green
}

<input placeholder="Text" type="text" />
&#13;
答案 1 :(得分:5)
input {
border: 0;
outline: 0;
border-bottom: 2px solid blue;
}
答案 2 :(得分:1)
#input_Id{
border:0px;
border-bottom:2px solid #eee;
}
答案 3 :(得分:1)
试试这个
.inp {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #03a8f45e;
padding: 5px 15px;
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??"/>
答案 4 :(得分:0)
你可以试试这个
.form-group input {
display: block;
background: none;
padding: 0.175rem 0.175rem 0.0875rem;
font-size: 1.4rem;
border-width: 0;
border-color: transparent;
line-height: 1.9;
width: 100%;
color: #ccc;
transition: all 0.28s ease;
box-shadow: none;
}
答案 5 :(得分:0)
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 />