Html 如何将输入文本框样式更改为线条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3131072/
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
how to change input text box style to line?
提问by nectar
in my form I have three input fields name, email, mobile but I want to change input text box like -
在我的表单中，我有三个输入字段名称、电子邮件、手机，但我想更改输入文本框，例如 -
name : _____________
email: _____________
mob : _____________
回答by Matthew Scharley
In your CSS:
在你的 CSS 中：
input[type=text] {
background: transparent;
border: none;
border-bottom: 1px solid #000000;
}
From here you can play with padding to position the actual text entry where you would like it. For instance, to have the line extend 5 pixels either side of the actual entry area:
从这里您可以使用填充来将实际文本条目放置在您想要的位置。例如，要使线条在实际输入区域的两侧延伸 5 个像素：
padding: 2px 5px;
回答by Kali Charan Rajput
if you want to this also in ie6 than you can use bg image for this with background-position
如果你也想在 ie6 中这样做，那么你可以使用背景位置的 bg 图像
.
.
input{
background:url(bg-dot.jpg) repeat-x center bottom;
border:none;
padding:2px 2px;
}
so for all browser support with ie6 you should use this.
所以对于 ie6 的所有浏览器支持，你应该使用它。
回答by Bappi Das
You can style an input box however you want. Check the Codepen where I have styled an input box only with css.
您可以随意设置输入框的样式。检查我仅使用 css 设置输入框样式的 Codepen。
Style an INPUT box with only CSS
HTML -
HTML -
<div class="input__box">
<input type="text" placeholder="Enter Some Text Here...">
</div>
CSS -
CSS -
.input__box{
width:800px;
height: 200px;
margin:0 auto;
background-color: #f2f2f2;
display: grid;
place-items:center;
position: relative;
}
.input__box input{
all:unset;
width:600px;
height:60px;
border:1px solid grey;
padding-left:55px;
font-size:18px;
color:#333;
font-family:sans-serif;
position:relative;
}
input:focus{
outline:1px solid royalblue;
border:none;
}
input[type="text"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-size:18px;
color:dimgrey;
font-family:sans-serif;
}
input[type="text"]::-moz-placeholder{ /* Firefox 19+ */
font-size:18px;
color:dimgrey;
font-family:sans-serif;
}
input[type="text"]:-moz-placeholder{ /* Firefox 18- */
font-size:18px;
color:dimgrey;
font-family:sans-serif;
}
input[type="text"]:-ms-input-placeholder{ /* IE 10+ */
font-size:18px;
color:dimgrey;
font-family:sans-serif;
}
input[type="text"]::placeholder {
font-size:18px;
color:dimgrey;
font-family:sans-serif;
}
.input__box::before{
content: "?";
position: absolute;
left: calc(50% - 327px);
top:calc(50% - 30px);
color: #333;
font-weight: bold;
font-size:40px;
padding:0 10px;
}
.input__box {
width: 800px;
height: 200px;
margin: 0 auto;
background-color: #f2f2f2;
display: grid;
place-items: center;
position: relative;
}
.input__box input {
all: unset;
width: 600px;
height: 60px;
border: 1px solid grey;
padding-left: 55px;
font-size: 18px;
color: #333;
font-family: sans-serif;
position: relative;
}
input:focus {
outline: 1px solid royalblue;
border: none;
}
input[type="text"]::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
font-size: 18px;
color: dimgrey;
font-family: sans-serif;
}
input[type="text"]::-moz-placeholder {
/* Firefox 19+ */
font-size: 18px;
color: dimgrey;
font-family: sans-serif;
}
input[type="text"]:-moz-placeholder {
/* Firefox 18- */
font-size: 18px;
color: dimgrey;
font-family: sans-serif;
}
input[type="text"]:-ms-input-placeholder {
/* IE 10+ */
font-size: 18px;
color: dimgrey;
font-family: sans-serif;
}
input[type="text"]::placeholder {
font-size: 18px;
color: dimgrey;
font-family: sans-serif;
}
.input__box::before {
content: "?";
position: absolute;
left: calc(50% - 327px);
top: calc(50% - 30px);
color: #333;
font-weight: bold;
font-size: 40px;
padding: 0 10px;
}<div class="input__box">
<input type="text" placeholder="Enter Some Text Here...">
</div>回答by Vishal Sharma
you want to show only bottom part that's why apply css in such a way that it disables all the other three parts ..
您只想显示底部，这就是为什么以禁用所有其他三个部分的方式应用 css 的原因。
apply CSS like
像应用 CSS
border: 1px solid black;
float: left;
margin: 0;
padding: 0;
border-top: 0px;
border-left: 0px;
border-right: 0px;
works for all
对所有人都有效
回答by user7685888
border: 1px solid black;
float: left;
margin: 0;
padding: 0;
border-top: 0px;
border-left: 0px;
border-right: 0px;
