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;
}
brillout.com:input和Textarea的字体颜色均为红色。所有样式都要针对不同的选择器而定,不要打包整体处理,因为其中一个出问题,其他的都会失效。
*::-webkit-input-placeholder {
color: red;
}
*:-moz-placeholder {
color: red;
}
*:-ms-input-placeholder {
/* IE10+ */
color: red;
}
James Donnelly:在Firefox和IE里,正常input文本颜色覆盖占位符颜色的方法:
::-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;
}
还有一种好办法:(实验成功)
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: 25px;
/* etc */
}
user1729061:不用CSS和占位文本,同样能得到相同效果。
<input type="text" value="placeholder text" onfocus="this.style.color='#000';
this.value='';" style="color: #f00;"/>
相关推荐
Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS 复制代码代码如下: input[placeholder], [placeholder], *[placeholder] { color:red !important; } HTML input语句 复制代码代码如下...
分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符)文本。 演示地址:...
当我们对input元素或者textarea元素写CSS样式的时候, 如果需要自定义占位文本(也就是placeholder)的样式的时候怎么办? CSS有一个伪元素选择器::placeholder可以解决我们的问题. 用法 HTML <input placeholder=...
6.3. <input>:placeholder属性:输入框占位符——输入提示 23 6.4. <input> number类型:数字输入框 23 6.5. <input> url类型:网址输入框 24 6.6. <input> email类型:邮箱输入框 24 6.7. 标签:创建文本域 25 6.8....
1、创建一个 div 标记 ,增加属性 ,设置 align 属性的值为 center ,设置 id 属性的值为 container,设置 title 属性的值为 这是一个div 这是一个div"> 四大标准属性: 1、id :定义元素在页面中独一无二的...
EnablePlaceholder jQuery插件一个非常简单轻巧的(1.7Kb)jQuery插件,它针对旧浏览器启用HTML5占位符行为,着眼于KISS原理,它不支持密码占位符。 与现有的许多其他占位符插件相比,我认为最好在搜索输入,文本...
角度更好的占位符改善input占位符的指令。 基于Dribble上的一个概念: ://dribbble.com/shots/1254439--GIF-Mobile-Form-Interaction?list=安装$ bower install angular-better-placeholders用法很简单,在您的输入...
占位符动画输入占位符动画,例如Gmail登录名 | :telescope: 技术领域 :memo: 执照 :balance_scale: MIT许可证-
首页部分主要分为两大块,第一块为管理员与用户的选择页面,此页面主要使用jsp定义了主要的页面布局,然后利用了css进行前端美化,然后给具体每个管理员登录和用户登录按钮加入了链接,分别跳转到了不同的登陆界面。...
input.placeholder-right :: placeholder {text-align:right; }如何在媒体查询中使标题横幅拉伸100%? 输入:焦点边框未显示。 仅在使用十六进制值时才需要使用“轮廓色”轮廓色。 要进行焦点状态转换,需要首先...
method: 'html' - 将用于添加图像的方法(html(默认)、附加或 css,它将添加图像作为占位符的背景) callback: null - 如果你想在加载图像后发生一些事情,回调就是它的功能 例子 $ ( function ( ) { var ...
面向钓鱼爱好者的 MERN 堆栈网络应用程序技术前端ReactCSS/HTML 后端MongoDB 表示节点.js 额外的谷歌地图 API 亚马逊网络服务 ... input type = "text" placeholder = "Search for a fish <.(<<)<" value