保留占位符后键入

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