ホームページ >ウェブフロントエンド >htmlチュートリアル >input_html/css_WEB-ITnose に影響を与えずに、HTML+CSS でこの種のログイン効果を作成するにはどうすればよいですか?
input_html/css_WEB-ITnose に影響を与えずに、HTML+CSS でこの種のログイン効果を作成するにはどうすればよいですか?
- WBOYオリジナル
- 2016-06-24 11:17:191388ブラウズ
ディスカッションへの返信 (解決策)
実際、テキスト ボックスは依然として「アカウント」という単語から分離されていることがわかります。デモを書きましょう。
<!DOCTYPE html><html><head> <title>demo</title> <script type="text/javascript" src="http://seventh77.com/view/publicjs/jquery-2.1.4.min.js"></script> <meta charset="utf-8"> <style> .input{ background-color: white; cursor: auto; padding: 1px 0px; border: 1px solid #aaa; display: inline-block; text-align: start; margin: 0em 0em 0em 0em; font: 13.3333px Arial; } .input input{ border: none; outline-style:none; } </style></head><body> <div class="input">账号：<input></div></body></html> 上記の意見に同意します
入力のラベル
CSS 部分
input{outline: none; border: 0;}.form-box{font-size: 12px; color: #000;}.form-section{position: relative; margin-bottom: 5px;}.form-section label{ position: absolute; width: 30px; left: 0; height: 30px; line-height: 30px; padding:0 5px; font-family: 'Microsoft Yahei'; font-weight: bold;}.form-section input{padding-left: 32px; height: 30px; width: 200px; border: 1px solid #ccc;}.submit-btn{ padding-right: 32px; color: #fff; background-color: #F33737; text-align: center; font-family: 'Microsoft Yahei'; font-weight: bold; cursor: pointer;} HTML 部分
<div class="form-box"> <div class="form-section"> <label for="username">邮箱</label> <input type="text" name="username" placeholder='请输入邮箱'> </div> <div class="form-section"> <label for="password">密码</label> <input type="password" name="password" placeholder='请输入密码'> </div> <div class="form-section"> <input class='submit-btn' type="submit" value="登录"> </div></div>
分かりましたか? 実際、入力の境界線を削除してから div で囲む必要がありますか?そして枠線を追加しますか？
テキスト div と div 内にテキスト ボックスを配置し、幅をパーセンテージで設定します
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。