Html 只有底部边框的输入文本字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37465458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 13:19:36 来源:igfitidea点击:
Input text field with only bottom border
提问by amrjo
How do I style the text inputfield to make it only have a border-bottomlike this one?
如何设置文本input字段的样式以使其只有border-bottom这样的一个？
Expected Text InputField
预期文本Input字段
回答by dippas
Use outline:0for chrome.. and then just set border-bottomas you like
使用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" />回答by Daniel Diekmeier
input {
border: 0;
outline: 0;
border-bottom: 2px solid blue;
}
回答by nos nart
Try this one
试试这个
.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?"/>回答by AsgarAli
#input_Id{
border:0px;
border-bottom:2px solid #eee;
}
回答by Kondal
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 />