使用CSS更改HTML5输入的占位符颜色
Chrome支持input[type=text]
元素的占位符属性 (其他人也可能这样做)。
但是以下CSS
对占位符的值没有任何作用:
input[placeholder], [placeholder], *[placeholder] { color: red !important; }
<input type="text" placeholder="Value">
Value
仍然是grey
而不是red
。
有没有办法改变占位符文本的颜色?
#1楼
这个怎么样
<input type="text" value="placeholder text" onfocus="this.style.color='#000'; this.value='';" style="color: #f00;" />
没有CSS或占位符,但您获得相同的功能。
#2楼
在Firefox和Internet Explorer中,普通输入文本颜色会覆盖占位符的颜色属性。 所以,我们需要
::-webkit-input-placeholder { color: red; text-overflow: ellipsis;
}
:-moz-placeholder { color: #acacac !important; text-overflow: ellipsis;
}
::-moz-placeholder { color: #acacac !important; text-overflow: ellipsis;
} /* For the future */
:-ms-input-placeholder { color: #acacac !important; text-overflow: ellipsis;
}
#3楼
我不记得我在互联网上找到这段代码片段的地方(它不是我写的,不记得我找到它的地方,也不记得是谁写的)。
$('[placeholder]').focus(function() {var input = $(this);if (input.val() == input.attr('placeholder')) {input.val('');input.removeClass('placeholder');}}).blur(function() {var input = $(this);if (input.val() == '' || input.val() == input.attr('placeholder')) {input.addClass('placeholder');input.val(input.attr('placeholder'));}}).blur();$('[placeholder]').parents('form').submit(function() {$(this).find('[placeholder]').each(function() {var input = $(this);if (input.val() == input.attr('placeholder')) {input.val('');}})});
只需加载此JavaScript代码,然后通过调用此规则使用CSS编辑占位符:
form .placeholder {color: #222;font-size: 25px;/* etc. */
}
#4楼
对于Bootstrap和Less用户,有一个mixin .placeholder:
// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {&:-moz-placeholder {color: @color;}&:-ms-input-placeholder {color: @color;}&::-webkit-input-placeholder {color: @color;}
}
#5楼
这样可以正常工作。 在这里演示:
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; } input:-moz-placeholder, textarea:-moz-placeholder { color: #666; } input::-moz-placeholder, textarea::-moz-placeholder { color: #666; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #666; }
<input type="text" placeholder="Value" />
#6楼
跨浏览器解决方案:
/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
图片来源: David Walsh
#7楼
履行
有三种不同的实现:伪元素,伪类和什么都没有。
- WebKit,Blink(Safari,谷歌Chrome,Opera 15+)和Microsoft Edge正在使用伪元素
::-webkit-input-placeholder
。 [ 参考 ] - Mozilla Firefox 4到18使用的是伪类
:-moz-placeholder
( 一个冒号)。 [ 参考 ] - Mozilla Firefox 19+使用伪元素
::-moz-placeholder
,但旧的选择器仍然可以使用一段时间。 [ 参考 ] - Internet Explorer 10和11使用伪类
:-ms-input-placeholder
。 [ 参考 ] - 2017年4月: 大多数现代浏览器都支持简单的伪元素
::placeholder
[ Ref ]
Internet Explorer 9及更低版本根本不支持placeholder
属性,而Opera 12及更低版本不支持占位符的任何CSS选择器。
关于最佳实施的讨论仍在继续。 请注意,伪元素就像Shadow DOM中的真实元素一样。 input
上的padding
将不会获得与伪元素相同的背景颜色。
CSS选择器
用户代理需要忽略具有未知选择器的规则。 请参阅选择器级别3 :
包含无效选择器的一组选择器无效。
所以我们需要为每个浏览器单独的规则。 否则,所有浏览器都会忽略整个组。
::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #909; opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #909; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #909; } ::placeholder { /* Most modern browsers support this now. */ color: #909; }
<input placeholder="Stack Snippets are awesome!">
使用说明
- 小心避免不良对比。 Firefox的占位符似乎默认为不透明度降低,因此需要使用
opacity: 1
。 - 请注意,如果占位符文本不适合,它就会被截断 - 在
em
输入元素的大小,并使用最小的字体大小设置进行测试。 不要忘记翻译:某些语言需要更多空间来存放同一个单词。 - 应该测试具有HTML支持
placeholder
但没有CSS支持的浏览器(如Opera)。 - 某些浏览器对某些
input
类型(email
,search
)使用其他默认CSS。 这些可能会以意想不到的方式影响渲染。 使用属性-webkit-appearance
和-moz-appearance
来更改它。 例:
[type="search"] {-moz-appearance: textfield;-webkit-appearance: textfield;appearance: textfield;}
#8楼
对于Bootstrap用户,如果您使用的是class="form-control"
,则可能存在CSS特异性问题。 你应该获得更高的优先级:
.form-control::-webkit-input-placeholder {color: red;
}
//.. and other browsers
或者,如果您使用Less :
.form-control{.placeholder(red);
}
#9楼
对于Sass用户:
// Create placeholder mixin
@mixin placeholder($color, $size:"") {&::-webkit-input-placeholder {color: $color;@if $size != "" {font-size: $size;}}&:-moz-placeholder {color: $color;@if $size != "" {font-size: $size;}}&::-moz-placeholder {color: $color;@if $size != "" {font-size: $size;}}&:-ms-input-placeholder {color: $color;@if $size != "" {font-size: $size;}}
}// Use placeholder mixin (the size parameter is optional)
[placeholder] {@include placeholder(red, 10px);
}
#10楼
现在我们有一种标准的方法将CSS应用于输入的占位符::placeholder
pseudo-element from this CSS Module Level 4 Draft。
#11楼
我刚刚意识到Mozilla Firefox 19+的一些东西,浏览器为占位符提供了不透明度值,因此颜色将不是您真正想要的颜色。
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color: #eee; opacity:1;
}
我将opacity
覆盖为1,所以最好去。
#12楼
我认为这段代码可行,因为只需要输入类型文本占位符。 所以这一行CSS足以满足您的需求:
input[type="text"]::-webkit-input-placeholder {color: red;
}
#13楼
我在这里尝试了各种组合来改变颜色,在我的移动平台上,最终它是:
-webkit-text-fill-color: red;
这诀窍。
#14楼
如果使用autoprefixer,请使用new ::placeholder
。
请注意,不推荐使用Bootstrap中的.placeholder mixin来支持这一点。
例:
input::placeholder { color: black; }
使用自动修复器时,上述内容将转换为所有浏览器的正确代码。
#15楼
这个简短而干净的代码:
::-webkit-input-placeholder {color: red;}
:-moz-placeholder {color: red; /* For Firefox 18- */}
::-moz-placeholder {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder {color: red;}
#16楼
如果您正在使用Bootstrap并且无法使其工作,那么您可能错过了Bootstrap本身添加这些选择器的事实。 这是我们正在谈论的Bootstrap v3.3。
如果您尝试更改.form-control CSS类中的占位符,那么您应该像这样覆盖它:
.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */color: #777;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #777;opacity: 1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */color: #777;opacity: 1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */color: #777;
}
#17楼
这是另一个例子:
.form-control::-webkit-input-placeholder { color: red; width: 250px; } h1 { color: red; }
<div class="col-sm-4"> <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/> </div>
#18楼
Compass有一个开箱即用的mixin。
举个例子:
<input type="text" placeholder="Value">
在SCSS中使用指南针:
input[type='text'] {@include input-placeholder {color: #616161;}
}
请参阅input-placeholder mixin的文档。
#19楼
对于使用Bourbon的 SASS / SCSS用户,它具有内置功能。
//main.scss
@import 'bourbon';input {width: 300px;@include placeholder {color: red;}
}
CSS输出,你也可以抓住这部分并粘贴到你的代码中。
//main.cssinput {width: 300px;
}input::-webkit-input-placeholder {color: red;
}
input:-moz-placeholder {color: red;
}
input::-moz-placeholder {color: red;
}
input:-ms-input-placeholder {color: red;
}
#20楼
好的,占位符在不同的浏览器中表现不同,所以你需要在你的CSS中使用浏览器前缀使它们相同,例如Firefox默认为占位符提供透明度,所以需要在你的css中添加不透明度1,加上颜色,它不是大多数时候都是一个大问题,但要让它们保持一致是很好的:
*::-webkit-input-placeholder { /* WebKit browsers */color: #ccc;
}
*:-moz-placeholder { /* Mozilla Firefox <18 */color: #ccc;opacity: 1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */color: #ccc;opacity: 1;
}
*:-ms-input-placeholder { /* Internet Explorer 10-11 */color: #ccc;
}
#21楼
尝试这个代码为不同的输入元素不同的风格
your css selector::-webkit-input-placeholder { /*for webkit */color:#909090;opacity:1;
}your css selector:-moz-placeholder { /*for mozilla */color:#909090;opacity:1;
}your css selector:-ms-input-placeholder { /*for for internet exprolar */ color:#909090;opacity:1;
}
例1:
input[type="text"]::-webkit-input-placeholder { /*for webkit */color: red;opacity:1;
}input[type="text"]:-moz-placeholder { /*for mozilla */color: red;opacity:1;
}input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */ color: red;opacity:1;
}
例2:
input[type="email"]::-webkit-input-placeholder { /*for webkit */color: gray;opacity:1;
}input[type="email"]:-moz-placeholder { /*for mozilla */color: gray;opacity:1;
}input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */ color: gray;}
#22楼
您可以使用CSS更改HTML5输入的占位符颜色。 如果碰巧,你的CSS冲突,这个代码注释工作,你可以使用(!important)如下所示。
::-webkit-input-placeholder { /* WebKit, Blink, Edge */color:#909 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color:#909 !important;opacity:1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */color:#909 !important;opacity:1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */color:#909 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */color:#909 !important;
}<input placeholder="Stack Snippets are awesome!">
希望这会有所帮助。
#23楼
您可以将其用于输入和焦点样式:
input::-webkit-input-placeholder { color:#666;}
input:-moz-placeholder { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */
#24楼
除了toscho的回答,我还注意到Chrome 9-10和Safari 5之间的一些webkit不一致,支持的CSS属性值得注意。
特别是在为占位符设置样式时,Chrome 9和10不支持background-color
, border
, text-decoration
和text-transform
。
完整的跨浏览器比较在这里 。
#25楼
添加一个非常好的和简单的实际可能性: css过滤器 !
它会设置一切,包括占位符。
以下将使用色调过滤器在同一调色板上设置两个输入以进行颜色更改。 它现在在浏览器中渲染得非常好(除了......)
input { filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%); }
<input placeholder="Hello world!" /> <input type="date" /><br> <input type="range" /> <input type="color" />
要允许用户动态更改,使用输入类型颜色进行更改或查找细微差别,请查看以下代码段:
来自: https : //codepen.io/Nico_KraZhtest/pen/bWExEB
function stylElem() { stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0) Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){ e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)" out.innerText = e.style.cssText })()} stylElem()
<div id="out"></div> <p> <input placeholder="Hello world!" /> <input type="date" /><br> <input type="range" /> <input type="color" /> Colors (change me)-> <input type="color" id="stylo" oninput="stylElem()" /> <br><br> <audio controls src="#"></audio> <br><br> <video controls src="#"></video>
Css过滤器文档: https : //developer.mozilla.org/en-US/docs/Web/CSS/filter
#26楼
最简单的方法是:
#yourInput::placeholder {color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {color: red;
}
#27楼
HTML的一部分:
<form action="www.anything.com"><input type="text" name="name"placeholder="Enter sentence"/></form>
我将展示如何通过CSS更改“输入句子”的表达颜色:
::placeholder{color:blue;}
#28楼
这是CSS选择器的解决方案
::-webkit-input-placeholder { /* WebKit, Blink, Edge */color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #909;opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */color: #909;opacity: 1;
}
::-ms-input-placeholder { /* Microsoft Edge */color: #909;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */color: #909;
}
- WebKit,Blink (Safari,谷歌Chrome,Opera 15+)和Microsoft Edge正在使用伪元素:
:: - WebKit的输入占位符。 - Mozilla Firefox 4到18使用的是伪类:
:-moz-placeholder(一个冒号)。
Mozilla Firefox 19+正在使用伪元素:
:: - moz-placeholder,但旧的选择器仍然会工作一段时间。 - Internet Explorer 10和11正在使用伪类:
:-ms-输入占位符。 - Internet Explorer 9及更低版本根本不支持占位符属性,而Opera 12及更低版本不支持占位符的任何CSS选择器。
#29楼
您可能还想要textareas样式:
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {color: #636363;
}
#30楼
/* do not group these rules */ *::-webkit-input-placeholder { color: red; } *:-moz-placeholder { /* FF 4-18 */ color: red; opacity: 1; } *::-moz-placeholder { /* FF 19+ */ color: red; opacity: 1; } *:-ms-input-placeholder { /* IE 10+ */ color: red; } *::-ms-input-placeholder { /* Microsoft Edge */ color: red; } *::placeholder { /* modern browser */ color: red; }
<input placeholder="hello"/> <br /> <textarea placeholder="hello"></textarea>
这将设置所有input
和textarea
占位符的样式。
重要说明:请勿对这些规则进行分组。 相反,为每个选择器创建一个单独的规则(组中的一个无效选择器使整个组无效)。
使用CSS更改HTML5输入的占位符颜色相关推荐
- html改变占位字符的颜色,使用CSS更改HTML5输入的占位符颜色
达令说 /* do not group these rules */*::-webkit-input-placeholder { color: red;}*:-moz-placeholder { ...
- python占位符怎么输入_python占位符怎么输入
占位符,顾名思义就是插在输出里站位的符号.占位符是绝大部分编程语言都存在的语法, 而且大部分都是相通的, 它是一种非常常用的字符串格式化的方式. 1.常用占位符的含义 s : 获取传入对象的__str ...
- 占位隐藏 html,CSS设置输入框占位符placeholder点击隐藏
在HTML5中可以对文本输入框增加placeholder属性,英文placeholder意思是占位符,用在文本输入框的时候可以友好的显示提示文字,例如下面这个就是常见的文本框提示效果: 对于IE浏览器 ...
- 文本视图(UITextView)占位符Swift
本文翻译自:Text View (UITextView) Placeholder Swift I'm making an application which uses a UITextView . 我 ...
- 使用CSS修改HTML5 input placeholder颜色
有三种实现方式:伪元素(pseudo-elements).伪类( pseudo-classes)和Notihing. WebKit和Blink(Safari,Google Chrome, Opera1 ...
- 3-Tensorflow-demo_02-变量_占位符_feeddict使用
import tensorflow as tf import numpy as np """ 以线性回归为例 y = x*w +b x = [[1,2,3,],[2,3, ...
- 实现跨浏览器的HTML5占位符
译自:http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text 译者:蒋宇捷,转载请标明出处(http://b ...
- mvc @html.textboxfor 添加正则表示式,如何在C#/ MVC 4中的Html.TextBoxFor中输入占位符文本...
通常在 HTML / CSS中,如果要将占位符文本添加到文本框,则只需执行以下操作: < input type ="text"class ="input-class ...
- CSS自适应的占位符效果
一种不错的自适应input效果,分享一下. html section : 1 <div style="width:500px;height:500px;margin:300px aut ...
最新文章
- 开发日记-20190819 关键词 随便聊聊
- mysql海量数据的优化
- Effective Java~57. 将局部变量的作用域最小化
- 可是来个拦路虎的scutzh
- IE 中开发,兼容与性能测试工具汇总
- rand函数怎么避免重复_Excel常用的计算统计函数
- android sqlite联合,在联合查询中,Android SQLiteorder by 计算列_sql_开发99编程知识库...
- C语言联合体(union)的使用方法及其本质-union
- Xshell Xftp 免费版申请 官方正版 | 无需破解
- 前端之路:一款轻量的tooltip插件tippy.js
- 如何抓取图片php,PHP网络爬虫之图片抓取
- 秋招跳槽求职P8架构大咖整理“Java后端技术面试笔记”,目标是成为Java架构师,这条件不过分吧
- 红米手机4X获得Root权限的流程
- 手机浏览器能上网微信无法连接服务器,苹果手机微信可以上网浏览器不能
- 升级了谷歌浏览器最新版不习惯,如何降级版本
- 23种设计模式彩图-设计模式之禅
- 关于华三HCL使用时,设备端口状态为down的解决
- 实验六(函数) 2.编写函数 int fac(int x)计算 x!的值。在主函数中输入 n 和 m 的值,通过调用函数 fac 计算Cnm 的值(要求分别用递归和非递归的方法编写函数 fac)。
- 西安邮电大学python期末考试_python想过期末考试再怎么学?
- 园艺智慧_园艺日:如何在完全远程的情况下运行技术债务清理日
热门文章
- 解决编译不通过Could not find support-compat.aar (com.android.support:support-compat:26.0.0).
- 第五周项目四-长方柱形(1)
- java多线程抽奖_java 线程池、多线程并发实战(生产者消费者模型 1 vs 10) 附案例源码...
- python教程app下载地址_python教程
- 互联网思维-产品思维(1)
- Java学习笔记32
- Android之EditText的各种使用
- 使用CoreLocation进行定位(Swift版)
- java解析getresponsebodyasstring_java读取网站内容的两种方法是什么呢?
- python 函数(二)