设置输入框input中placeholder的字体颜色、字体大小

如何设置输入框input中placeholder的字体颜色、字号

须知

placeholder属性时css3中新增加的属性,IE9和Opera12以下版本的CSS选择器均不支持占用文本。

设置placeholder文字颜色、字号

方式一

因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。

::-webkit-input-placeholder{/*Webkit browsers*/
	color:#999;
	font-size:16px;
}
:-moz-placeholder{/*Mozilla Firefox 4 to 8*/
	color:#999;
	font-size:16px;
}
::moz-placeholder{/*Mozilla Firefox 19+*/
	color:#999;
	font-size:16px;
}
:-ms-input-placeholder{/*Internet Explorer 10+*/
    color:#999;
    font-size:16px;
}

方式二

建议使用该方式,如果是在手机客户端webview只使用-webkit内核方式即可。

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
	color:#666;
	font-size:16px;
}

input:-moz-placeholder,textarea:-moz-placeholder{
	color:#666;
	font-size:16px;
}

input::-moz-placeholder,textarea::-moz-placeholder{
	color:#666;
	font-size:16px;
}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{
	color:#666;
	font-size:16px;
}

  • 9
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: input placeholder 字体颜色可以通过 CSS 样式来更改。可以使用 ::placeholder 或 :placeholder-shown 伪类来选择输入框placeholder 文本,然后设置 color 属性来更改颜色。 示例: ``` input::placeholder { color: red; } ``` 或 ``` input:placeholder-shown { color: red; } ``` 这两个方式都可以改变input placeholder的颜色。 ### 回答2: 在前端开发input placeholder是一个很常见的元素。Placeholder是在input元素显示的默认文本提示,当用户在输入框输入内容时,Placeholder会消失。在CSS,可以通过设置input placeholder字体颜色来控制Placeholder的颜色。 设置input placeholder字体颜色的方法是使用CSS的伪类选择器::-webkit-input-placeholder、:-moz-placeholder和::-moz-placeholder以及:-ms-input-placeholder(IE浏览器)来控制。这些伪类选择器可以用于不同的浏览器,确保Placeholder字体颜色在各种浏览器保持一致。 下面是一个简单的CSS样式示例,用于设置input placeholder字体颜色: ``` input::placeholder { color: red; } /* 兼容 Mozila Firefox */ input:-moz-placeholder { color: red; } /* 兼容 webkit */ input::-webkit-input-placeholder { color: red; } /* 兼容 IE */ input:-ms-input-placeholder { color: red; } ``` 在上述代码,样式选择器`input::placeholder`控制input元素的Placeholder颜色为红色。为确保跨浏览器兼容性,添加了其他伪类选择器以确保在各种浏览器都正确设置Placeholder字体颜色。 改变input placeholder字体颜色是使页面更加美观和易于使用的一种方法。设置一个具有足够对比度的颜色可以帮助用户更轻松地识别和使用输入框。因此,在前端开发,正确设置input placeholder字体颜色是至关重要的。 ### 回答3: HTMLinput元素可以使用placeholder属性来显示提示信息,当输入框为空时,这些提示信息显示在文本框内,可以帮助用户更好地理解该文本框应该输入什么。但是,有很多时候,输入框placeholder字体颜色可能与输入时字体颜色不同,这就会给用户带来一些困扰。 对于placeholder字体颜色,应该根据实际情况进行设置。一般来说,浅灰色是一个很好的选择,因为它既不会与输入时的文字颜色重叠,也不会对用户造成任何视觉干扰。这里需要注意的是,如果input元素已经设置了样式,那么placeholder的样式将会被重写,因此需要特别确认一下样式是否正确。 如果你想要设置placeholder字体颜色,那么你可以通过CSS代码来实现。首先,你需要选input元素内的placeholder文本,可以使用以下代码: ::placeholder { color: #ccc; } 在这个例子,我们将placeholder字体颜色设置为浅灰色。你可以根据实际情况来设置颜色,但是需要注意的是,这可能不适用于所有浏览器。一些浏览器可能会忽略这个样式,或者将其设置为默认颜色。因此,你需要测试一下,看看你的样式是否适用于所有浏览器。 总之,input元素的placeholder字体颜色应该根据实际情况进行设置,最好选择一种不会与输入时的字体颜色冲突的颜色,这样可以更好地帮助用户理解该输入框的用途。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值