作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我一直在关注这个small tutorial将动画添加到输入字段的占位符。当输入字段获得焦点时,动画将占位符移出输入字段。
此动画在输入字段上完美运行,占位符在输入字段上方可见,但是当我将此动画添加到文本区域时,占位符一旦通过文本区域的边缘就会消失。
input,
textarea {
margin: 30px 0 0 0;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder{
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
visibility: visible !important;
}
<input type="text" id="edit-field-name-0-value" value="" size="60" maxlength="255" placeholder="Name *" required="required">
<textarea rows="8" cols="60" placeholder="Message *" required="required"></textarea>
这是一个 JSFiddle来证明问题。
有谁知道我还可以在其上方显示文本区域的占位符吗?
最佳答案
如 @somethinghere's comment 所述,当输入字段非空时,您将遇到可访问性/可用性问题,这会删除占位符。虽然与您原来的方法有些不同,但结合使用 CSS 定位、HTML 标签和 flexbox 可以实现相同的效果,而不会在填充每个字段时丢失指示符。
方法很简单:
<div>
中包装输入和标签元素元素。标签必须出现在相邻兄弟选择器的输入之后 +
上类flex-direction: column-reverse
.这种方法的优点是您可以根据需要对元素重新排序,例如在移动屏幕上等。+
通过更改其 top
来移动标签随附的输入/文本区域处于焦点时的属性这是一个概念验证示例:
div {
display: flex;
flex-direction: column-reverse;
}
input,
textarea {
display: block;
font-family: 'Arial';
font-size: 1em;
}
label {
display: block;
font-family: 'Arial';
font-size: 1em;
position: relative;
top: 1.5em;
left: .35em;
transition: all .5s ease-in-out;
}
input:focus + label,
textarea:focus + label {
top: 0;
}
<div>
<input type="text" id="edit-field-name-0-value" value="" size="60" maxlength="255" placeholder="Name *" required="required">
<label for="edit-field-name-0-value">Name *</label>
</div>
<div>
<textarea rows="8" cols="60" placeholder="Message *" required="required" id="textarea0"></textarea>
<label for="textarea0">Message *</label>
</div>
如果您想使用 CSS 转换而不是 top
定位,这也是可能的:
div {
display: flex;
flex-direction: column-reverse;
}
input,
textarea {
display: block;
font-family: 'Arial';
font-size: 1em;
}
label {
display: block;
font-family: 'Arial';
font-size: 1em;
position: relative;
transform: translateY(1.5em);
left: .35em;
transition: all .5s ease-in-out;
}
input:focus + label,
textarea:focus + label {
transform: translateY(0);
}
<div>
<input type="text" id="edit-field-name-0-value" value="" size="60" maxlength="255" placeholder="Name *" required="required">
<label for="edit-field-name-0-value">Name *</label>
</div>
<div>
<textarea rows="8" cols="60" placeholder="Message *" required="required" id="textarea0"></textarea>
<label for="textarea0">Message *</label>
</div>
关于html - 文本区域的占位符在移出文本区域时不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41464984/
我正在做一个项目,我的 android 在这个项目中作为一个网络服务器工作;输入带端口号的 IP 地址,打开 Web 界面,用户可以将文件上传到手机。我想在 Web 界面上显示一些图片,以便我们的界面
我是一名优秀的程序员,十分优秀!