やりたいこと
inputのテキストボックスにプレースホルダーのような形で文字を置いて、クリックと同時にその文字が上に動くようにしたいです。
参考: http://materializecss.com/forms.html
このmaterializeのフォームのようにしたいわけです。。
質問
実際にやろうと思って、フォームにの上に、relativeで文字重ねたところ、文字がフォームの上に被ってしまってフォームをクリックできなくなりました。
どうしたらいいのでしょう
コードと画像を載せておきます
見た目はうまく言ってますが、フォームを押せません。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <title>ログインページ</title> 7 <meta name="description" content="ログインを行うページです。IDとpasswordを入力してもらうか、新規登録画面へ飛べます。"> 8 <meta name="viewport" content="width=device-width"> 9 <link rel="stylesheet" href="../css/login.css"> 10 <link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css"> 11</head> 12 13<body> 14 <div class="wrapper"> 15 <i class="fa fa-address-card fa-5x" id="logo" aria-hidden="true"></i> 16 <p id="idMessage">ID</p> 17 <input type="text" id="idForm"/> 18 <input type="password" id="passwordForm"/> 19 <p id="passWordMessage">PW</p> 20 </div> 21 <script src="../riot+compiler.min.js"></script> 22 <script src="../tags/mytag.tag" type="riot/tag"></script> 23 <script>riot.mount('*');</script> 24</body> 25</html>
css
1.wrapper { 2 width: 300px; 3 height: 400px; 4 background: #a8a8a8; 5 border-radius: 4px; 6 box-shadow: -3px 3px 20px 0px rgba(0,0,0,0.6); 7 margin-left: 300px; 8} 9 10#idForm { 11 width: 250px; 12 height: 25px; 13 border: none; 14 border-bottom: solid 1px #b5b5b5; 15 background-color: transparent; 16 margin-left: 25px; 17 outline: 0; 18 font-size: 100%; 19} 20 21#idMessage { 22 color: #cbcbcb; 23 position: relative; 24 top: 45px; 25 left: 25px; 26 padding-top:10px; 27} 28 29#passwordForm { 30 width: 250px; 31 height: 30px; 32 border: none; 33 border-bottom: solid 1px #b5b5b5; 34 background-color: transparent; 35 margin-left: 25px; 36 margin-top: 20px; 37 outline: 0; 38 font-size: 100%; 39} 40 41#passWordMessage { 42 color: #cbcbcb; 43 position: relative; 44 bottom: 38px; 45 left: 25px; 46} 47 48#logo { 49 margin-left: 100px; 50 margin-top: 50px; 51} 52
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/09/05 15:17