input输入框内设置placeholder的样式

yunchong_zhao

于 2020-04-26 14:57:48 发布

阅读量5.4k

点赞数 3

分类专栏： html css3 文章标签： html css

本文链接：https://blog.csdn.net/yunchong_zhao/article/details/105768955

版权

css3 同时被 2 个专栏收录

52 篇文章

订阅专栏

html

10 篇文章

订阅专栏

本文探讨了默认input样式的设置方法，包括高度、宽度、字体大小和对齐方式，并详细介绍了针对不同浏览器（如谷歌内核、火狐、IE）的占位符样式调整，以确保一致的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认input的样式

input{
	height: 40px;
	width: 300px;
	line-height: 40px;
	font-size: 20px;
	text-align: center;
}
<input type="text" placeholder="请输入你的账号">

存在兼容性问题

input::-webkit-input-placeholder{  // 针对 谷歌 内核
   font-weight:600;
    color:#f00;
    line-height:40px;
}
input:-moz-placeholder{   // 火狐
    font-weight:600;
    color:#f00;
    color:#f00;
}
input:-ms-input-placeholder{  // 微软ie
    font-weight:600;
    color:#f00;
    color:#f00;
}