修改input中placeholder字体颜色方法

字号+ 作者:alpha 来源:www.seoalphas.com 2018-09-18 13:57 浏览次数(133)

<input name="user" type="text" placeholder="联系人

<input name="user" type="text" placeholder="联系人">

如上,input的placeholder属性我们无需修改,但是如果恰巧我们设置的背景色和placeholder默认颜色一样的话,尴尬的事情就发生了,很小的一个问题会耽误我们不少时间查找什么原因造成的。

通过css样式设置input中placeholder字体颜色代码如下:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
 /* WebKit browsers */ 
color: #333; 
font-family: "Microsoft Yahei","Lucida Grande", "Lucida Sans Unicode", "STHeiti", "Helvetica","Arial","Verdana","sans-serif";
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
/* Mozilla Firefox 4 to 18 */ 
color: #333; 
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
 /* Mozilla Firefox 19+ */ 
color: #333; 
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
 /* Internet Explorer 10+ */ 
color: #333; 
}

当然,也可以修改字体样式、大小等属性。

标签

本站部分技术文章为参考网上实用内容发布,目的是记录踩坑经验,若未备注来源而侵犯了您原创文章权益,请联系博主删除;对文章有不同看法的朋友欢迎在评论区留言互动

相关文章
  • DIV半透明层 CSS来实现网页背景半透明

    DIV半透明层 CSS来实现网页背景半透明

    浏览次数:817

  • Iframe 用法的详细讲解

    Iframe 用法的详细讲解

    浏览次数:664

  • CSS实现背景透明,文字不透明,兼容所有浏览器

    CSS实现背景透明,文字不透明,兼容所有浏览器

    浏览次数:584

  • Flex 布局教程:语法篇

    Flex 布局教程:语法篇

    浏览次数:432

  • pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全)

    pc端常用电脑屏幕 ((响应式PC端媒体查询)电脑屏幕分辨率尺寸大全)

    浏览次数:419

  • Flex 布局教程:实例篇

    Flex 布局教程:实例篇

    浏览次数:370

  • css3中的width:100vh以及calc(100vh + 10px) 视窗高度/宽度

    css3中的width:100vh以及calc(100vh + 10px) 视窗高度/宽度

    浏览次数:324

  • 如何让html的div内容溢出后显示滚动条

    如何让html的div内容溢出后显示滚动条

    浏览次数:221

网友点评
功能开发中......其实是博主懒了而已......
0.687500s