Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用:
CSS
input[placeholder], [placeholder], *[placeholder] {
color:red !important;
}
HTML
<input type="text" placeholder="Value" />
运行结果值还是灰色,Color:red没有作用。有什么方法可以修改占位文本的颜色吗?我在浏览器里安装了jQuery占位文本插件,但仍然无用。
原问题:Change an input's HTML5 placeholder color with CSS
回答:
toscho:有三種實現方式:偽元素(pseudo-elements)、偽類( pseudo-classes)和Notihing。
WebKit和Blink(Safari,Google Chrome, Opera15 )使用偽元素
Mozilla Firefox 4-18使用偽類
Mozilla Firefox 19 使用偽元素
IE10使用偽類
IE9和Opera12以下版本的CSS選擇器均不支持占位文本。需要注意的是偽元素在Shadow DOM裏會起到元素的真實作用。
CSS選擇器
因為每個瀏覽器的CSS選擇器都有所差異,所以需要針對每個瀏覽器做單獨的設定。
Matt:textareas(文本框可拉伸)風格樣式的代碼,如下:
brillout.com:input和Textarea的字體顏色均為紅色。所有樣式都要針對不同的選擇器而定,不要打包整體處理,因為其中一個出問題,其他的都會失效。
James Donnelly:在Firefox和IE裏,正常input文本顏色覆蓋占位符顏色的方法:
還有一種好辦法:
最後一種是從網上找的:
這個代碼調用的規則是,先加載Javascript再用CSS修改占位符屬性。
user1729061:不用CSS和占位文本,同樣能得到相同效果。
好像隻能分開來寫不能像
.樣式名 .樣式名::-webkit-input-placeholder,
.樣式名 .樣式名::-moz-input-placeholder {}
這種是沒有效果的
CSS代碼:
input:-moz-placeholder { color: #369; }
::-webkit-input-placeholder { color:#369; }
HTML代碼:
郵箱:
<input id="email" type="email" placeholder="zhangxinxu@zhangxinxu.com" size="26" />
在原文看了看,搬了搬.
很多人都會選擇這種解決:
user1729061:不用CSS和占位文本,同樣能得到相同效果。
作者的完善:
雖然完善了部分,但用戶提交時會將placeholder text跟隨表單一同提交到服務器!
我選了這個:
opacity: 1;是為了修改FF的默認透明度導致顏色偏差;其它注意的是文本大小的設置和 input types (email, search). These might affect the rendering in unexpected ways. Use the properties -webkit-appearance and -moz-appearance to change that. 例子: