使用css隐藏占位符 [英] hide placeholder with css

问题描述

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

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"> 

我真正的问题是这么简单。如何隐藏此占位符与css？

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

提前感谢！

推荐答案

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

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

您可以做什么，将占位符文本颜色设置为文本框的背景颜色，因此它看起来像没有占位符..

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

检查小提琴

这篇关于使用css隐藏占位符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！