placeholder样式怎么修改,修改input placeholder文字颜色

http://www.itjxue.com  2023-01-23 00:03  来源:未知  点击次数: 

怎么修改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;}

(责任编辑:IT教学网)

更多

推荐网络创业文章