1249人阅读
前端（76）
placeholder是HTML5 &input的新属性，英文意思是占位符，它一般表示input输入框的默认提示值。
当然，和一样，你只能设置几个和文本有关系的CSS样式：Color,
font-style, font-varian, background, text-decoration
PS：IE从IE 10才开始支持placeholder属性，伪选择器名字还不得而知，估计是加前缀-ms-了
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：39995次
排名：千里之外
原创：10篇
转载：66篇
(2)(1)(1)(1)(3)(3)(6)(1)(6)(10)(8)(2)(1)(4)(2)(1)(5)(6)(2)(12)匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。多行+垂直居中placeholder -
- ITeye技术网站
博客分类：
要做一个水平 竖直都居中的placeholder，并且过长时有自动换行
1.把外层container的display设为table，里层设为table-cell，并对里层设置vertical-align:middle实现垂直居中。
2.padding和border：
实际所占宽度=width+padding+margin+border
3.border本来设置在外层，但input获取焦点后重设border时不方便。。。于是设到里层
4.对手机去除自带样式可用appearance: -webkit-appearance:
&!DOCTYPE html&&html&
&head&&meta charset=utf-8 /&
&title&多行+垂直居中placeholder&/title&
&style type="text/css"&
.container{
text-align:
font-size: 12
padding:4px 0 4px 0;
.container * {
display: table-
vertical-align:
.placeholderDiv{
color: #6D6D6D;
letter-spacing: 2
white-space: pre-
margin: 0 5px 0 5
.emailInput{
border:solid 1px #E0DEDE;;
text-indent:10
.borderRdaius {
border-radius: 5
box-shadow:0 1px 10px rgba(0,0,0,0.1)
border:1px solid #E0DEDE;
.emailInput:focus{
box-shadow:0 0 4px rgba(255,153,164,0.8);
border:solid 1px #B00000;}
&script src="/ajax/libs/jquery/1/jquery.min.js"&&/script&
&script type="text/javascript"&
$().ready(function(){
$(".placeholderDiv").click(function(){
$(this).hide();
$(".emailInput").show();
$(".emailInput").focus();
$(".emailInput").blur(function(){
if($(this).val() == ""){
$(".emailInput").hide();
$(".placeholderDiv").show();
&div class="container"&
&div class="placeholderDiv borderRdaius"&请输入您的电子邮箱&/div&
&input class="emailInput borderRdaius"/&
tbd
input获取焦点后多出了1px的上下边距？
浏览: 4668 次HTML5 input placeholder 颜色修改示例
作者：佚名
字体：[ ] 来源：互联网 时间：05-30 16:54:51
这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识，需要的朋友可以参考下
Chrome支持input=[type=text]占位文本属性，但下列CSS样式却不起作用： CSS 代码如下: input[placeholder], [placeholder], *[placeholder] { color:red ! } HTML input语句 代码如下: &input type="text" placeholder="Value" /& 运行结果值还是灰色，Color：red没有作用。有什么方法可以修改占位文本的颜色吗？我在浏览器里安装了jQuery占位文本插件，但仍然无用。(!important只有IE7和firefox能识别） 回答： toscho：有三种实现方式：伪元素（pseudo-elements）、伪类（ pseudo-classes）和Notihing。 WebKit和Blink（Safari,Google Chrome, Opera15+）使用伪元素 代码如下: ::-webkit-input-placeholder Mozilla Firefox 4-18使用伪类 代码如下: :-moz-placeholder Mozilla Firefox 19+ 使用伪元素 代码如下: ::-moz-placeholder IE10使用伪类 代码如下: :-ms-input-placeholder IE9和Opera12以下版本的CSS选择器均不支持占位文本。需要注意的是伪元素在Shadow DOM里会起到元素的真实作用。 CSS选择器 因为每个浏览器的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; } Matt：textareas（文本框可拉伸）风格样式的代码，如下： 代码如下: input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #636363; } input:-moz-placeholder, textarea:-moz-placeholder { color: #636363; } ：input和Textarea的字体颜色均为红色。所有样式都要针对不同的选择器而定，不要打包整体处理，因为其中一个出问题，其他的都会失效。 代码如下: *::-webkit-input-placeholder { color: } *:-moz-placeholder { color: } *:-ms-input-placeholder { /* IE10+ */ color: } James Donnelly：在Firefox和IE里，正常input文本颜色覆盖占位符颜色的方法： 代码如下: ::-webkit-input-placeholder { color: text-overflow: } :-moz-placeholder { color: #acacac ! text-overflow: } ::-moz-placeholder { color: #acacac ! text-overflow: } /* for the future */ :-ms-input-placeholder { color: #acacac ! text-overflow: } 还有一种好办法: 代码如下: 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; } 最后一种是从网上找的: 代码如下: $('[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: 25 /* etc */ } user1729061：不用CSS和占位文本，同样能得到相同效果。 代码如下: input type="text" value="placeholder text" onfocus="this.style.color='#000'; this.value='';" style="color: #f00;"/&
大家感兴趣的内容
12345678910
最近更新的内容