placeholder样式怎么修改,修改input placeholder文字颜色
怎么修改placeholder字体的css样式
修改palceholder内文字的css样式
1 ::-webkit-input-placeholder{
2 color: red;
3 font-size: 20px;
4 line-height: 50px;
5 }
修改class名为test1的元素palceholder内文字css样式
.test1::-webkit-input-placeholder{
color: red;
font-size: 20px;
line-height: 50px;
}
比如:
!DOCTYPE html
html
head
meta charset="UTF-8"
title/title
style
input{
height: 50px;
font-size: 14px;
line-height: 50px;
}
.test1::-webkit-input-placeholder{
color: red;
font-size: 20px;
line-height: 50px;
}
/style
/head
body
input class="test1" type="text" placeholder="测试" /
input type="text" placeholder="测试" /
/body
/html
怎么设置输入框placeholder样式
首先我们先简单写个html页面,里面放一个input和一个textarea,简单设置一下基本样式,注意写上placeholder。 然后在浏览器中预览一下效果,会看到默认的placeholder颜色是灰色的。 再然后就是设置placeholder的字体颜色了,因为不同浏览器存在...
如何修改placeholder样式
因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。
::-webkit-input-placeholder { /* WebKit browsers */color:#999;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color:#999;}::-moz-placeholder { /* Mozilla Firefox 19+ */color:#999;}:-ms-input-placeholder { /* Internet Explorer 10+ */color:#999;}
还可以写成下面这样:
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #666;}input:-moz-placeholder, textarea:-moz-placeholder {color:#666;}input::-moz-placeholder, textarea::-moz-placeholder {color:#666;}input:-ms-input-placeholder, textarea:-ms-input-placeholder {color:#666;}