CSS如何修改placeholder样式

2018-11-09 admin

项目用经常遇到修改input的placeholder的颜色的需求,这里来看一下placeholder如何用css设置:

原文发布与我的个人博客>>

首先来看一下chrome默认的input样式

<input type="text" placeholder="hello world">

(placeholder)

c591ae0a-06d2-4f06-afcc-c1948ab7bded

(input style)

9fdc4846-3525-4577-85de-fb6398f2ec76

可以发现,placeholderinput的默认颜色是有点区别的。现在我们来修改input 的颜色

<input type="text" placeholder="hello world" style="color: red">

(placeholder)

b79f0fe1-bebe-469e-845f-8210df88a773

(input)

fb3e8298-bfee-480b-bf14-192c85f6f524

不难发现color属性只能改变输入值的颜色,placeholder的颜色没人任何变化。so,如何来改变placeholder的颜色。

要改变placeholder的颜色就要使用到伪类::placeholder

<style>
    input::placeholder {
        color: green;
    }
</style>
<input type="text" placeholder="hello world" style="color: red;">

(placeholder)

b5e9582d-75a9-4b2b-ab95-d45f171a57b8

(input)

f1add868-2d75-4314-b884-b54fa04425f2

需要注意的是::palceholder伪类的兼容性,以上是在chrome浏览器的运行结果,同样的代码在IE11中就成了这样

(placeholder - ie11)

99c9ed01-ae6a-4d64-9848-ecfda20e7388

(input - ie11)

f1add868-2d75-4314-b884-b54fa04425f2

IE解决方案:

首先IE9及以下不支持placeholder。IE10需要用:-ms-input-placeholder,并且属性需要加上!important提高优先级。

<style>
    input:-ms-input-placeholder {
        color: green !important;
    }
</style>
<input type="text" placeholder="hello world" style="color: red;">

(placeholder ie11)

49a81692-f86c-4614-abb0-87914e5c44d2

(input ie11)

b3c1772c-211a-41dd-bcc1-6cf7aeda7f8b

之后给出其他浏览器的适配方案

/* - Chrome ≤56,
   - Safari 5-10.0
   - iOS Safari 4.2-10.2
   - Opera 15-43
   - Opera Mobile >12
   - Android Browser 2.1-4.4.4
   - Samsung Internet
   - UC Browser for Android
   - QQ Browser */
::-webkit-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 4-18 */
:-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 19-50 */
::-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
    color: #ccc !important;
    font-weight: 400 !important;
}

/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* CSS Working Draft */
::placeholder {
    color: #ccc;
    font-weight: 400;
}

原文链接:https://segmentfault.com/a/1190000016954855

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-44920.html

文章标题:CSS如何修改placeholder样式

相关文章
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
2015 Web 2.0和AJAX如何做好优化
2015如何让做好web2.0和ajax的优化?JavaScript中文网总结当下提出以下四大优化意见,旨在帮助W前端开发人员有效利用APM解决上述问题。 随着Web应用程序速度与效率快速增长,网站已经成为企业与其客户进行交互的第一途径——...
2015-11-12
纯css实现窗户玻璃雨滴逼真效果
这里仅是用CSS技术来演示这样的一个场景,可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果,将使用到HAML和Sass。 案例效果 看到上面的效果是不是...
2017-03-29
7个你可能不认识的CSS单位
浼楁墍鍛ㄧ煡CSS鎶€鏈�鎴戜滑铏界劧寰堢啛鎮夛紝鍦ㄤ娇鐢ㄧ殑杩囩▼鍗村緢瀹规槗琚�鍥颁綇锛岃繖璁╂垜浠�鍦ㄦ柊闂�棰樺嚭鐜扮殑鏃跺€欏彉寰楀緢涓嶅埄銆� 闅忕潃web缁х画涓嶆柇鍦板彂灞曪紝瀵逛簬鏂版妧鏈�鏂拌В鍐虫柟妗堢殑瑕佹眰涔熶細涓...
2015-11-11
如何使用JavaScript
一、应用&lt;script&gt;标签加入JavaScript 任何脚本语言均可以通过&lt;script&gt;…&lt;/script&gt;标记对加入到HTML代码中(即是加入到网页文档&lt;html&gt;…&lt;/html&...
2015-11-12
jQuery给多个不同元素添加class样式的方法
本文实例讲述了jQuery给多个不同元素添加class样式的方法。分享给大家供大家参考。具体分析如下: jQuery可以通过addClass()方法给多个不同的html元素同时添加相同的class &lt;!DOCTYPE html&gt;...
2017-03-22
JS动态修改图片的URL(src)的方法
本文实例讲述了JS动态修改图片的URL(src)的方法。分享给大家供大家参考。具体如下: 下面的JS代码可以动态修改图片地址,以显示一张新的图片,实际上是通过修改图片的src属性来实现的 &lt;!DOCTYPE html&gt; &lt;...
2017-03-22
bootstrap table 数据表格行内修改的实现代码
js中设置列的属性 editable : { type : &#x27;text&#x27;,&#x2F;&#x2F;数据显示在文本框内 emptytext : &quot;--&quot;,&#x2F;&#x2F;数据为空时显示 vali...
2017-03-14
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
发现问题 在 vue2 中对表单控件有着良好的双向数据绑定机制,但是对于要特定实现某些功能的输入时,我们就不得不使用到 contenteditable=“true” 的 div ,而在这个 div 上是使用 v-model 是没有效果的。那...
2017-03-20
回到顶部