HTML5输入框提示文字颜色该怎么调？
input[placeholder], [placeholder], *[placeholder] {
color:red !important;
}
你们知道不？HTML5这玩意儿现在超受欢迎哒，有好多牛逼实用的功能喔~就像那个input元素的placeholder属性，觉得挺好用的，能设置输入框内的提示文字。不过，我发现在Chrome浏览器里面，想改变提示文字的颜色有些费劲，总是调不好。所以，我就来给大家分享几个懒人妙招，让你也能轻松搞定这个麻烦事儿！
伪元素、伪类和Nothing
Toscho教授告诉我们，变变色儿的占位文字其实有个小妙招：就是幻影元素（就叫做伪元素吧）加上幻影类（也叫伪类）再加个啥子都没有（我们简称为Nothing）。比如，苹果Safari、谷歌Chrome还有Opera15+这几种浏览器都是靠伪元素搞定的哦；Firefox浏览器，4至18版本用的是伪类，但从19就改用伪元素啦；而IE10，用的还是伪类。哦对，还得提醒你下这个伪元素在影子DOM里面可真的是有效的！
CSS选择器兼容性
每款浏览器都有个性，咱们得针对它来设定不同的CSS选项。比如说那个Matt，他就老提到那个可拉伸的文本框textareas，他说在设置stylesheet时，不能马虎，每个选择器都得细分出来，不能随便丢进去不然搞出问题那可就不好收场喽！
::-webkit-input-placeholder
覆盖占位文本颜色
:-moz-placeholder
在 Firefox 或 Internet Explorer 里，输入框的字老是把占位符的颜色给遮住，让人烦躁！不过别急，詹姆斯·唐纳利有两个妙招告诉你：第一个是，先玩转 JavaScript，再用 CSS 改改占位符的设置；另一个是，直接上网找个特别的编码规律。两种方法都挺管用，能帮你解决这个烦恼。
不用CSS和占位文本实现相同效果
::-moz-placeholder
用户1729061来瞧瞧，他发现了个不需要CSS还有占位文本就能做到同样效果的好方法，给我们前端开发增加了新的思维空间。别光顾着用那些司空见惯的技巧，尝试下新花样！
结合Javascript与CSS
:-ms-input-placeholder
改成想要的颜色，不用那么麻烦！用javascript和css搞定，简直炫酷到爆！简单说就是让javascript给样式加个料，然后用css精心调整，来个超有趣又有个性的效果。这个方法让我们的开发者在处理这种情况时有了更多的创意空间，觉得超级棒！
优化用户体验
在做网页设计时要注意，要有好的用户体验才行！可以考虑换一下占位文字的颜色，试试看加点动态效果之类的。保证网页正常运转同时，让界面更美观、操作更简单就对了，这样大家用着才会心情舒畅嘛～
::-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: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #636363;
}
结语
说来容易做起来难，HTML5输入框提示文字换色这事儿还真有点儿耐力活儿！虽然过程中，咱可能会遇到各种各样的小问题，甚至还有兼容性这样的大事。可是别急，咱们只要好好研究一下怎么解决这些问题，就能顺利完成！比如说，多掌握几种实现技巧，让界面变得更好看；或者，熟悉一下JavaScript跟CSS这些工具，让操作变得更加顺畅。这样不仅能轻松应对前端开发中的困难，还给大家带来更好用的网速！
这就是改变HTML5输入框提示文字颜色的简单教程，希望能帮到你们！加油！
*::-webkit-input-placeholder {
color: red;
}
*:-moz-placeholder {
color: red;
}
*:-ms-input-placeholder {
/* IE10+ */
color: red;
}
。
评论0