Question

我想选择所有文本框占位符并赋予它通用样式。我的想法：

      <style>
        .textbox > placeholder
        {
        font-size: 15pt;
         }

      </style>

Answer 1

使用这个技巧。

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

<input type="text" placeholder="this is the placeholder text"/>

Answer 2

跨浏览器代码：

＆＃13;

.textbox::-webkit-input-placeholder {
   color: red;
}

.textbox:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

.textbox::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

.textbox:-ms-input-placeholder {  
   color: red;  
}

＆＃13;

<input type="text" class="textbox" placeholder="I am placeholder" style="width: 200px;" />

＆＃13;

Answer 3

试试这个

Jsfiddle

input::-webkit-input-placeholder {
  color: red;
}

有关详情，请参阅 https://css-tricks.com/snippets/css/style-placeholder-text/

Answer 4

请检查此链接： https://davidwalsh.name/html5-placeholder-css，

示例：

/* for all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* field is id, individual: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3p

如何为所有文本框占位符指定样式

4 个答案: