やりたいこと

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件

すいません。
上記コードだとどこがどこだか再現するのが難しかったので自前で書きました。

inputを囲う要素の中にinputとtextを入れます。
inputにfocusしたタイミングでcssの:focusが適用されるので、input:focus + .textという風に隣接要素を指定するcssを使用してテキスト部分のscaleやpositionを変更してみました。

html
1<div class="wrap">
2  <div class="input-wrap">
3    <input type="text" />
4    <div class="text">email</div>
5  </div>
6</div>

css
1.wrap{padding: 20px;}
2
3.input-wrap{
4  width: 200px;
5  height: 30px;
6  position: relative;
7}
8
9.input-wrap .text{
10  position: absolute;
11  top: 6px;
12  left: 5px;
13  font-size: 13px;
14  transition: all .2s ease;
15}
16
17.input-wrap input{
18  display: block;
19  width: 100%;
20  height: 100%;
21}
22
23.input-wrap input:focus + .text{
24  color: red;
25  top: -20px;
26  left: 0;
27  transform: scale(0.8);
28}

投稿2017/09/05 14:13

MasakazuFukami

総合スコア1869

退会済みユーザー

2017/09/05 15:17

回答ありがとうございます display:blockにすれば確かに他のところは押せるようになるのですが、emailの文字の部分を押しても反応しないのではないですか？今自分で試していたところ、labelというのを使うことで、文字を押してもフォームが反応するようにできました。

行動規範の内容に同意します

ベストアンサー

今自分で試していたところ、labelというのを使うことで、文字を押してもフォームが反応するようにできました。
pointer-events:none;
にすることでポインターも無効にできました。

html
1<input type="text" id="idForm"/>
2<label for="idForm">ID</label>

投稿2017/09/05 15:18

編集2017/09/05 15:53

退会済みユーザー

総合スコア0

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

フォームの中の文字をクリックと同時に上に動かしたいのですが...

やりたいこと

質問

関連した質問