行のテキストボックスのHTML

：行のテキストボックスのHTML

enter image description here

それはあなたが入力テキストをできるだけラインです。それはCSSでこれを行うことは可能ですか？またはブートストラップで？

出典

2013-11-15 user2785929

なぜ人々はこのような投票の質問を下すのですか？彼/彼女はおそらくHTML/CSSには新しく、わからない。確かに彼/彼女はこれをGoogleにすることができますが、彼/彼女はGoogleに何を知らないかもしれません。 –

あなたは右だった.. – Vainglory07

雅、それはあなたがいない画像や幅に制限下線でそれを行うことができます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-15 03:24:53 Vainglory07

はい、それは

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

出典

2013-11-15 03:19:17

可能である私は、あなたが持っているイメージに背景propetyを設定し、テキストボックスを作成することができると思います水平線。

<!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-15 03:21:32 newday

ことが可能ですインプのしかし、それは多くの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-15 03:25:22

.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-15 04:08:07 Ink

私が個別に第一と第三の方法を試してみましたが、うまくいきませんでした確認してください：私が使用http://jsfiddle.net/2jJvF/

CSSはこれでした。私はそれらを一緒に試してみると、私のために働いた。これはもちろん、上記のコピーですが、これはそのように見えます。

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-10 16:56:41 vagdevi

行のテキストボックスのHTML

答えて

関連する問題