我正在使用响应式主题。我在这里面临输入表单问题。在桌面视图中,输入不会有占位符,但有标签。
但是,当涉及到移动视图时,我将隐藏此输入标签并用占位符更改此标签。
<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;
}
}
CSS仅提供样式,它不能删除实际的占位符。
你可以做什么,将占位符文本颜色设置为文本框的背景颜色,这样看起来你就没有占位符..
::-webkit-input-placeholder { /* WebKit browsers */
color: #fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #fff;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #fff;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #fff;
}
检查小提琴
您可以使用媒体查询并根据所需的分辨率隐藏和显示:
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
::-webkit-input-placeholder {
color: lightgray !important;
}
:-moz-placeholder { /* Firefox 18- */
color: lightgray !important;
}
::-moz-placeholder { /* Firefox 19+ */
color: lightgray !important;
}
:-ms-input-placeholder {
color: lightgray !important;
}
#labelID
{
display:none !important;
}
}
普通款式
::-webkit-input-placeholder {
color: transparent;
}
:-moz-placeholder { /* Firefox 18- */
color: transparent;
}
::-moz-placeholder { /* Firefox 19+ */
color: transparent;
}
:-ms-input-placeholder {
color: transparent;
}
#labelID{
display:block;
}
你应该使用JS
$(window).resize(function(){
if ($(window).width() >= 600){
$(':input').removeAttr('placeholder');
}
});
使输入字段和占位符文本的颜色相同。 css 没有其他方法。
@media all and (max-width:736px){
::-webkit-input-placeholder {
color:white;
}
:-moz-placeholder { /* Firefox 18- */
color:white;
}
::-moz-placeholder { /* Firefox 19+ */
color:white;
}
:-ms-input-placeholder {
color:white;
}
}
<input name="name" type="text" id="id_here" placeholder="Your Label">
使占位符隐藏在桌面视图中
input::-moz-placeholder {
opacity: 0;
}
或
input::-moz-placeholder {
color:white;
}
适用于不同浏览器
-webkit-输入-占位符 -ms-输入占位符 -moz-占位符
此代码/css 仅在焦点上显示“占位符”:
:not(:focus)::-webkit-input-placeholder {
/* WebKit browsers */
color: transparent;
}
:not(:focus):-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: transparent;
}
:not(:focus)::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: transparent;
}
:not(:focus):-ms-input-placeholder {
/* Internet Explorer 10+ */
color: transparent;
}
对我来说,这两个效果很好。请记住,这只是使占位符不可见。
方法一:
::-webkit-input-placeholder {
color: transparent;
}
方法二:
::placeholder {
color: transparent;
}