入力後にプレースホルダーを保持する

Question

浮動プレースホルダーを持つ2つの入力フィールドがあります。フォーカスすると、プレースホルダが上に移動し、ユーザーが入力するためのスペースが作成されます。しかし、ユーザーが入力を開始するとすぐに消えます。テキストボックスに何かを入力した後、プレースホルダを同じ場所に置いておきたいです。これはCSSだけを使って可能ですか？あなたはlabelを使用する必要がありますコメントし

input { 
 
    width: 100%; 
 
    display: block; 
 
    border: none; 
 
    padding: 20px 0 10px 0; 
 
    border-bottom: solid 1px #343a40; 
 
    -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); 
 
    transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); 
 
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 99%, #007bff 1%); 
 
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 99%, #007bff 1%); 
 
    background-position: -1000px 0; 
 
    background-size: auto 100%; 
 
    background-repeat: no-repeat; 
 
    color: #000; 
 
} 
 

 
input:focus, 
 
input:valid { 
 
    box-shadow: none; 
 
    outline: none; 
 
    background-position: 0 0; 
 
} 
 

 
input::-webkit-input-placeholder { 
 
    font-family: 'roboto', sans-serif; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 

 
input:focus::-webkit-input-placeholder, 
 
input:valid::-webkit-input-placeholder { 
 
    color: #007bff; 
 
    font-size: 12px; 
 
    -webkit-transform: translateY(-20px); 
 
    transform: translateY(-20px); 
 
    visibility: visible !important; 
 
}

<input placeholder="Username" type="text" required> 
 
<input placeholder="Password" type="password" required>

Answer 1

。 また、コヒーレントになるように入力に正しく接続されています。

https://www.w3.org/wiki/HTML/Elements/label

<label>要素は、ユーザインタフェースにキャプションを表します。用

• HTML属性=キャプションが関連付けられるフォームコントロールを示すために、指定された文字列

。 属性の値は、label要素と同じDocument内のラベル付け可能なフォーム関連要素のIDでなければなりません。

例：<input type="checkbox" id="lost" name="lost"> <label for="lost">Lost</label>

そこから、設定labelは、右入力した後、それは+セレクタを介して、スタイル可能であろう。

CSSの例

label { 
 
    position: absolute; 
 
    margin-top: -1.75em;/*climbs under the input */ 
 
    transition: all 0.3s ease-in-out; 
 
} 
 
input { 
 
    position: relative; 
 
    z-index: 1;/* set input on top of label. opaque white bg color can be used to lighten label's color */ 
 
    width: 100%; 
 
    display: block; 
 
    border: none; 
 
    padding: 20px 0 10px 0; 
 
    border-bottom: solid 1px #343a40; 
 
    transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); 
 
    transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); 
 
    background: linear-gradient(
 
    to top, 
 
    rgba(255, 255, 255, 0) 99%, 
 
    #007bff 1% 
 
); 
 
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 99%, #007bff 1%) 
 
    rgba(255, 255, 255, 0.4); 
 
    background-position: -1000px 0; 
 
    background-size: auto 100%; 
 
    background-repeat: no-repeat; 
 
    color: transparent;/* hide value if any when label is standing here too */ 
 
} 
 
input:focus { 
 
    color: #000; 
 
} 
 
input:valid + label { 
 
    color: #06a31b; 
 
    z-index: 1;/* let's show this field is filled */ 
 
} 
 
input:focus + label, input:active + label { 
 
    font-size: 12px; 
 
    color: #007bff; 
 
    font-size: 12px; 
 
    transform: translateY(-2em);/* move it up more */ 
 
} 
 

 
input:focus, 
 
input:valid { 
 
    box-shadow: none; 
 
    outline: none; 
 
    background-position: 0 0; 
 
}

<input placeholder="" id="User" type="text" required><label for="User">Username</label> 
 
<input id="pwd" placeholder="" type="password" required><label for="pwd">Password</label>

フィールドはに関する情報については

label { 
 
    position: absolute; 
 
    margin-top: -1.75em;/*climbs under the input */ 
 
    transition: all 0.3s ease-in-out; 
 
} 
 
input { 
 
    position: relative; 
 
    z-index: 1;/* set input on top of label. opaque white bg color can be used to lighten label's color */ 
 
    width: 100%; 
 
    display: block; 
 
    border: none; 
 
    padding: 20px 0 10px 0; 
 
    border-bottom: solid 1px #343a40; 
 
transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); 
 
    transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); 
 
    background:linear-gradient(
 
    to top, 
 
    rgba(255, 255, 255, 0) 99%, 
 
    #007bff 1% 
 
); 
 
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 99%, #007bff 1%) 
 
    rgba(255, 255, 255, 0.4); 
 
    background-position: -1000px 0; 
 
    background-size: auto 100%; 
 
    background-repeat: no-repeat; 
 
} 
 
input:focus { 
 
    color: #000; 
 
} 
 
input:valid + label, 
 
input:focus + label, input:active + label { 
 
    font-size: 12px; 
 
    color: #007bff; 
 
    font-size: 12px; 
 
    transform: translateY(-2em);/* move it up more */ 
 
} 
 

 
input:focus, 
 
input:valid { 
 
    box-shadow: none; 
 
    outline: none; 
 
    background-position: 0 0; 
 
}

<input placeholder="" id="User" type="text" required><label for="User">Username</label> 
 
<input id="pwd" placeholder="" type="password" required><label for="pwd">Password</label>

を満たした後、ラベルが先頭に立って他のCSSの例：:valid/:invalidはCSSセレクタドラフト状態https://drafts.csswg.org/selectors-4/#validity-pseudosでまだレベル4が、まだうまく入力は任意のコンテンツを持っていたら、プレースホルダはもはや示されていないため、