10

次のようなテキストボックスを作成したい：

enter image description here

テキストを入力できる行です。cssでこれを行うことは可能ですか? またはブートストラップで？

4

6 に答える 6

14

はい、可能ですDEMO HERE

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

1番目と3番目の方法を個別に試しましたが、うまくいきませんでした。それらを一緒に試してみると、うまくいきました。もちろん上からのコピペですが、こんな感じです。

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 に答える
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 に答える