保留佔位符後鍵入

Question

我有2個輸入字段與浮動佔位符。焦點上，佔位符向上移動併爲用戶輸入空間。但是一旦用戶開始輸入它就會消失。在文本框中輸入內容後，我希望佔位符保留在同一個地方。這是可能的只使用CSS？

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

的評論，你應該使用一個label。 也正確連接到其輸入連貫。

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>

其它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; 
 
} 
 
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>

對於相關信息：:valid/:invalid是CSS選擇器水平4仍處於狀態https://drafts.csswg.org/selectors-4/#validity-pseudos草案，但尚未很好inplemented http://caniuse.com/#search=%3Avalid