我想创建一个这样的文本框：
它只是您可以输入文本的一行。可以用css做到这一点吗？还是在引导程序上？
问问题
28556 次
6 回答
14
是的，可以在这里演示
HTML
<input type="text" class="text-line" />
CSS
body {
background: #333333;
}
.text-line {
background-color: transparent;
color: #eeeeee;
outline: none;
outline-style: none;
border-top: none;
border-left: none;
border-right: none;
border-bottom: solid #eeeeee 1px;
padding: 3px 10px;
}
于 2013-11-15T03:24:53.637 回答
2
是的，有可能
HTML
<input type="text"/>
CSS
input[type="text"] {
border:none; /* Get rid of the browser's styling */
border-bottom:1px solid black; /* Add your own border */
}
于 2013-11-15T03:19:17.113 回答
2
您可以在没有图像和限制输入宽度的下划线的情况下执行此操作，但它需要许多 CSS 属性。看到这个：http: //jsfiddle.net/2jJvF/
我使用的 CSS 是这样的：
* {
background-color: black;
}
input[type=text] {
color: white;
border: none;
}
input[type=text]:focus {
outline: none;
}
.text-container {
border: 0px 1px 0px 0px;
border-bottom: white solid;
}
于 2013-11-15T03:25:22.367 回答
0
我认为您可以创建文本框，然后将背景属性设置为具有水平线的图像。
<!DOCTYPE html>
<html>
<head>
<style>
.body1
{
background-image:url('gradient2.png');
background-repeat:repeat-y;
padding-left:20px;
}
</style>
</head>
<body>
<input type="text" class="body1" />
</body>
</html>
于 2013-11-15T03:21:32.947 回答
0
.text-input {
border-bottom: solid 1px black;
border-top: none;
border-left: none;
border-right: none;
}
input[type="text"]:focus{
outline: none;
}
检查我的 jsfiddle
http://jsfiddle.net/inked/kCXh5/
于 2013-11-15T04:08:07.363 回答
0
我已经分别尝试了第一种和第三种方法，但没有奏效。当我一起尝试它们时，它对我有用。当然，这是上面的副本，但这就是它的样子。
input[type="text"] {
border:none; /* Get rid of the browser's styling */
border-bottom:1px solid black; /* Add your own border */
}
.text-line {
background-color: transparent;
color: #eeeeee;
outline: none;
outline-style: none;
border-top: none;
border-left: none;
border-right: none;
border-bottom: solid #eeeeee 1px;
padding: 3px 10px;
}
</style>
</head>
<body>
<h2>Card</h2>
<div class="card">
<div class="container">
<h4><b>Question</b></h4>
<input type="text" class="text-line"/>
<p>Architect & Engineer</p>
</div>
</div>
</body>
于 2018-02-10T16:56:41.887 回答