Html 用css隐藏占位符

hide placeholder with css

提问by iyal

I'm working with a responsive theme. And I'm facing the input form problem here. In the desktop view, the input will not have placeholder but have label.

我正在使用响应式主题。我在这里面临输入表单问题。在桌面视图中，输入将没有占位符但有标签。

However, when it comes to the mobile view, I will hide this input label and change this label with placeholder.

但是，当涉及到移动视图时，我将隐藏此输入标签并使用占位符更改此标签。

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

My real question is so simple here. How to hide this placeholder with css?

我真正的问题在这里很简单。如何用css隐藏这个占位符？

Thanks in advance!

提前致谢！

回答by Luca Fagioli

This will hide the placeholder only for desktops (and large tablets):

这将仅隐藏台式机（和大型平板电脑）的占位符：

@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.

在 Codepen 上检查一下。

回答by Deepak Sharma

CSS only provides the styling, it can not remove the actual placeholder.

CSS 只提供样式，它不能删除实际的占位符。

What you can do it, set the placeholder text color as your background color of textbox, so it will look like you dont have placeholder..

你可以做什么，将占位符文本颜色设置为文本框的背景颜色，这样看起来你就没有占位符..

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

Check the fiddle

检查小提琴

回答by Guruprasad Rao

You can use media queries and hide and show based on required resolution:

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

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

Normal Styles

普通样式

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

回答by J.K

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

Make the placeholder hide in desktop view

使占位符隐藏在桌面视图中

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

OR

或者

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

1. Change input(or textarea whatever) to #id_here or class name, if you dont want to change all inputs in the website

2. Use for different browsers

   -webkit-input-placeholder -ms-input-placeholder -moz-placeholder

1. 如果您不想更改网站中的所有输入，请将输入（或 textarea 任何内容）更改为 #id_here 或类名

2. 用于不同的浏览器

   -webkit-input-placeholder -ms-input-placeholder -moz-placeholder

回答by Diwas

Make both the input field and placeholder text same color. There is no other way with css.

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

回答by heady12

You should use JS

你应该使用JS

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