用css隐藏占位符

kh212irz  于 2022-12-24  发布在  其他
关注(0)|答案(7)|浏览(280)

我正在使用一个响应式主题。我正面临着输入表单的问题。在桌面视图中,输入将没有占位符,但有标签。
但是,当谈到移动的视图时,我将隐藏这个输入标签,并使用占位符更改这个标签。

<input name="name" type="text" placehoder="insert your name">

如何用CSS隐藏这个占位符?

mm9b1k5b

mm9b1k5b1#

这将仅隐藏台式机(和大型平板电脑)的占位符:

@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;
    }
}

Check it on Codepen.

t98cgbkg

t98cgbkg2#

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

检查the fiddle

rseugnpd

rseugnpd3#

您可以使用媒体查询,并根据所需的分辨率隐藏和显示:

/* 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;
}
klh5stk1

klh5stk14#

使输入域和占位符文本的颜色相同。在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;
    }   
    }
omvjsjqw

omvjsjqw5#

你应该用JS

$(window).resize(function(){
    if ($(window).width() >= 600){  
        $(':input').removeAttr('placeholder');
    }   
});
jv4diomz

jv4diomz6#

<input name="name" type="text" id="id_here" placeholder="Your Label">

在桌面视图中隐藏占位符

input::-moz-placeholder {
  opacity: 0;
 }

input::-moz-placeholder {
   color:white;
}

1.如果不想更改网站中的所有输入,请将input(或textarea)更改为#id_here或类名
1.用于不同的浏览器

  • webkit输入占位符-ms输入占位符-moz占位符
9nvpjoqh

9nvpjoqh7#

此代码/css仅在焦点上显示'placeholder':

: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;
}

相关问题