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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

322閲覧

inputのtextで、labelを動かしたい

naoki_m

総合スコア29

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/08/16 18:12

前提・実現したいこと

https://webdesign-trends.net/entry/152#i-5
上記リンクの『フォーム』をコピペして作りたいのですが、labelが上手く動きません。
このお手本のものでは、フォームが未選択の状態では、placeholderのようにlabelの文字をフォーム上に表示させ、クリックされると、上に動き、文字のサイズが小さくなります。
ですが、自分のものでは、最初から上に表示され、文字のサイズも小さくなっています。

つまりは、通常状態がないという状況です。

苦戦しましたがなかなか解決しないので、どうかご助力いただけると幸いです。

※Djangoを使っていて、その関係でinputやlabelをクラスで指定しています。

該当のソースコード

HTML

1 <form> 2 <div class="group"> 3 <input type="text" value="ooo@example.com" class="in1"> 4 <span class="highlight"></span> 5 <span class="bar"></span> 6 <label class="label4">mail</label> 7 </div> 8 <div class="group"> 9 <input type="text" class="in1"> 10 <span class="highlight"></span> 11 <span class="bar"></span> 12 <label class="label4">password</label> 13 </div> 14 </form>

CSS

1* { box-sizing:border-box; } 2 3/* basic stylings ------------------------------------------ */ 4.container { 5 font-family:'Roboto'; 6 /*width:600px;*/ 7 margin:16px auto 0; 8 display:block; 9 /*background:#FFF;*/ 10 /*padding:10px 50px 50px;*/ 11} 12 13/* form starting stylings ------------------------------- */ 14.group { 15 position:relative; 16 margin-bottom:20px; 17} 18input.in1[type="text"] { 19 font-size:18px; 20 padding:10px 10px 10px 5px; 21 display:block; 22 width: 63vw; 23 border:none; 24 border-bottom:1px solid #757575; 25 background-color: none; 26 -webkit-appearance: none; 27 box-shadow: none; 28} 29input.in1[type="text"]:focus { 30 outline:none; 31} 32 33/* LABEL ======================================= */ 34label.label4 { 35 color: #999; 36 font-size:18px; 37 font-weight:normal; 38 position:absolute; 39 pointer-events:none; 40 left:5px; 41 top:10px; 42 transition:0.2s ease all; 43 -moz-transition:0.2s ease all; 44 -webkit-transition:0.2s ease all; 45} 46 47/* active state */ 48input.in1[type="text"]:focus ~ label.label4, input.in1[type="text"]:valid ~ label.label4 { 49 top:-20px; 50 font-size:14px; 51 color:#ff7777; 52} 53 54/* BOTTOM BARS ================================= */ 55.bar { position:relative; display:block; width:315px; } 56.bar:before, .bar:after { 57 content:''; 58 height:2px; 59 width:0; 60 bottom:1px; 61 margin-bottom: 15px; 62 position:absolute; 63 background:#ff7777; 64 transition:0.2s ease all; 65 -moz-transition:0.2s ease all; 66 -webkit-transition:0.2s ease all; 67} 68.bar:before { 69 left:25%; 70} 71.bar:after { 72 right:50%; 73} 74 75/* active state */ 76input.in1[type="text"]:focus ~ .bar:before, input.in1[type="text"]:focus ~ .bar:after { 77 width:50%; 78} 79 80/* HIGHLIGHTER ================================== */ 81.highlight { 82 position:absolute; 83 height:60%; 84 width:100px; 85 top:25%; 86 left:0; 87 pointer-events:none; 88 opacity:0.5; 89 border: none; 90} 91 92/* active state */ 93input.in1[type="text"]:focus ~ .highlight { 94 -webkit-animation:inputHighlighter 0.3s ease; 95 -moz-animation:inputHighlighter 0.3s ease; 96 animation:inputHighlighter 0.3s ease; 97} 98 99/* ANIMATIONS ================ */ 100@-webkit-keyframes inputHighlighter { 101 from { background:#ff7777; } 102 to { width:0; background:transparent; } 103} 104@-moz-keyframes inputHighlighter { 105 from { background:#ff7777; } 106 to { width:0; background:transparent; } 107} 108@keyframes inputHighlighter { 109 from { background:#ff7777; } 110 to { width:0; background:transparent; } 111}

試したこと

問題箇所は、おそらくactive stateという場所なのだとは、思うのですが、原因がわかりません。

補足情報(FW/ツールのバージョンなど)

Django

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/08/16 21:18

念のため「Django」もタグに追加しておいてください。利用者の目に止まった方が解決が早まるかもしれません。提示のコードはブラウザ「ソースを表示」の結果ですかね?何かしらDjangoで組んでいる部分があるのでしたらそのソースを提示した方がいいかもしれません。
guest

回答1

0

ベストアンサー

css

1input.in1[type="text"]:focus ~ label.label4, 2input.in1[type="text"]:valid ~ label.label4 { 3 top:-20px; 4 font-size:14px; 5 color:#ff7777; 6}

この部分が常に効いていることに問題があります。

:validinputの形式が正しいかどうかを判断するのですが、type="text"の場合では常にvalidの状態です。

参考にされているサイトではinputrequiredになっており、必須なのに空白のため、invalidとなり上記CSSが効きません。(=inputの中にlabelが来るように見える)
対象のinputrequiredにするか、input.in1[type="text"]:valid ~ label.label4を外すかのいずれかで期待通りの動きになるかと思います。

※参考サイトにて、Emailがtype="email"ではなくtype="text"になっているのは、type="email"にしてしまうとEmailの形式になるまでinvalidになってしまい、focusが外れた際にlabelinputの中に来るように見えてしまうためです。

追記

間違っていたので訂正させてください。

input.in1[type="text"]:valid ~ label.label4を外す

とフォーカスが外れたときにlabelinput内に戻ってしまいますね…。

回避策としてはinput.in1[type="text"]:not(:placeholder-shown) ~ label.label4
として、HTML側に
<input placeholder=" ">を追加すればいいのですが、
:placeholder-shownはIEやEdgeで対応していないので、考えものですね。
https://caniuse.com/#search=placeholder-shown

やはりrequired:validを組み合わせるのがいいんですかねぇ…。

投稿2018/08/17 01:26

編集2018/08/17 04:34
macaron_xxx

総合スコア3191

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

naoki_m

2018/08/17 03:43

ご回答ありがとうございます。 macaron_xxxさんのお詳しいご解説のおかげで、仕組みを理解することができ、後者の方法で無事に解決できました。 また、emailのご解説もありがとうございます。 大変勉強になりました!
macaron_xxx

2018/08/17 04:34

回答に不備がありましたので、追記しました。 申し訳ありません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問