Question

我想创建一个这样的文本框：

enter image description here

这只是一个可以输入文字的行。用css可以做到这一点吗？还是在引导程序上？

Answer 1

<强> 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;
}

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

    }

Fiddle

Answer 3

你可以使用没有图像和下划线限制输入的宽度，但它需要许多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;
}

Answer 4

我认为您可以创建文本框，然后将背景属性设置为具有水平线的图像。

<!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>

Answer 5

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

Answer 6

我已经单独尝试了第一种和第三种方法，但没有成功。当我一起尝试它们时，它对我有用。当然，这是上面的副本，但这就是它的样子。

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>

行文本框HTML

6 个答案: