前提・実現したいこと
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
回答1件
あなたの回答
tips
プレビュー