用CSS隐藏占位符

Question

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

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

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

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

提前致谢！

原文由 iyal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这将仅隐藏桌面（和大型平板电脑）的占位符：

 @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 上查看。

原文由 Luca Fagioli 发布，翻译遵循 CC BY-SA 4.0 许可协议