我正在使用响应式主题。我在这里面临输入表单问题。在桌面视图中,输入不会有占位符,但有标签。
但是,当涉及到移动视图时,我将隐藏此输入标签并使用占位符更改此标签。
<input name="name" type="text" placehoder="insert your name">
如何用 CSS 隐藏这个占位符?
这将仅隐藏台式机(和大型平板电脑)的占位符:
@media (min-width:1025px) and (min-width:1281px) {
::-webkit-input-placeholder {
/* WebKit browsers */
color: transparent;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: transparent;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: transparent;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: transparent;
}
input::placeholder {
color: transparent;
}
textarea::-webkit-input-placeholder {
/* WebKit browsers */
color: transparent;
}
textarea:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: transparent;
}
textarea::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: transparent;
}
textarea:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: transparent;
}
textarea::placeholder {
color: transparent;
}
}
在 Codepen 上检查一下 https://codepen.io/anon/pen/gNmYNP.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)