7
A
答えて
8
雅、それはあなたがいない画像や幅に制限下線でそれを行うことができます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;
}
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 */
}
0
可能である私は、あなたが持っているイメージに背景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>
2
ことが可能ですインプのしかし、それは多くの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;
}
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/
0
私が個別に第一と第三の方法を試してみましたが、うまくいきませんでした確認してください:私が使用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>
関連する問題
- 1. SQLデータベースのhtmlテキストボックス
- 2. JavaScriptでテキストボックス/ HTML
- 3. JavaScriptとHTMLコードのテキストボックス
- 4. HTMLテキストボックスのフォントとフォントサイズ
- 5. HTMLテキストボックスの書き込み
- 6. HTMLテキストボックス、自動ハイライトテキスト
- 7. 単行WPFのテキストボックス
- 8. HTMLでHTMLテキストボックスに関連するクエリ
- 9. テキストボックスの値を変更するhtmlリンク
- 10. Htmlの敏捷性パックinnerHTMLプロパティは、テキストボックス
- 11. DjangoのHTML入力テキストボックスadmin.pyフィルタ
- 12. htmlテキストボックスの入力をハイチャートグラフに追加
- 13. javascriptをhtml形式のテキストボックスに変換
- 14. テキストボックス次の行へスクロール
- 15. 実行時間のテキストボックス
- 16. WPFテキストボックスのバインディングと改行
- 17. ユーザーフォームのテキストボックスがhtmlテキストボックスのように動作するようにする
- 18. Silverlight複数行テキストボックス
- 19. XULのテキストボックスでの改行のキャッチ
- 20. 複数行のテキストボックス、ブラックベリーのボーダー付き
- 21. Webサービス出力をHTMLテキストボックスにマップ
- 22. テキストボックスに関連したHTMLエンコード/デコード
- 23. シェアポイントWebパーツの複数行テキストボックス
- 24. ページあたりのWinformsテキストボックス行数
- 25. 複数行のテキストボックスで自動高さ
- 26. "最初の行"でクリック可能なテキストボックス
- 27. つのテキストボックスと提出行動
- 28. テーブルhtmlのテキストボックスのサイズを減らす方法は?
- 29. jQueryを使用したHTMLテキストボックスの入力スペースの防止
- 30. フォーム内のhtmlテキストボックスの値を印刷する
なぜ人々はこのような投票の質問を下すのですか?彼/彼女はおそらくHTML/CSSには新しく、わからない。確かに彼/彼女はこれをGoogleにすることができますが、彼/彼女はGoogleに何を知らないかもしれません。 –
あなたは右だった.. – Vainglory07