placeholder插件及placeholder默认颜色修改
$.fn.placeHolder = function(){
$(this).each(function(i, el) {
var self = $(el);
if ($.browser.msie && !("placeholder" in $("<input/>")[0])) {
if(self.attr("data-placeHolder")||!self.attr("placeholder")){
return;
}
self.attr("data-placeHolder",true);
var that = $("<div/>");
var parent = self.parent();
if(parent.css("position")!=="absolute"&&parent.css("position")!=="fixed"){
parent.css("position", "relative");
}
that.css({
"left": self.offset().left - parent.offset().left + parseInt(self.css("borderLeftWidth")),
"top": self.offset().top - parent.offset().top + parseInt(self.css("borderTopWidth")),
"width":self.width(),
"height":self.height(),
"lineHeight":self.css("lineHeight"),
"fontSize":self.css("fontSize"),
"paddingLeft":self.css("paddingLeft"),
"paddingTop":self.css("paddingTop"),
"textIndent":self.css("textIndent"),
"position":"absolute",
"color":"#666669",
"outline":"none!important",
"border":"none!important",
"backgroundColor":"transparent",
"cursor": "text"
});
that.html(self.attr("placeholder"));
parent.append(that);
that.on("click", function() {
self[0].focus();
});
function showPlaceholder() {
if (self.val() === "") {
that.show()
} else {
that.hide();
}
}
self.on("input propertychange", showPlaceholder);
showPlaceholder();
}
});
};
$(function() {
$("[placeholder]").placeHolder();
});
改变placeholder的默认颜色代码如下:
::-moz-placeholder{color:red;} //ff
::-webkit-input-placeholder{color:red;} //chrome,safari
:-ms-input-placeholder{color:red;} //ie10
Placeholder插件在支持自带placeholder的浏览器原样显示不处理,低版本在同级创建div。(记得引入jQuery)
placeholder插件及placeholder默认颜色修改的更多相关文章
- IE10以下兼容H5中的placeholder 以及改变它默认颜色
placeholder是H5<input>的属性之一,可惜在IE10以下不支持,万恶的IE!不过正因为有IE,才多了很多捣鼓,添了乐趣.不支持就不支持呗,自己动手丰衣足食,我们可以用js模 ...
- input,select默认颜色修改
input::-webkit-input-placeholder{color: #7f7f7f;} select{color: #7f7f7f} option{color: #7f7f7f;}
- 修改输入框placeholder文字默认颜色-webkit-input-placeholder
html5为input添加了原生的占位符属性placeholder,高级浏览器都支持这个属性,例如: <input type="text" placeholder=" ...
- 【css】修改placeholder 默认颜色
html5为input添加了原生的占位符属性placeholder,高级浏览器都支持这个属性,例如: <input type="text" placeholder=" ...
- HTML5 input placeholder 颜色修改示例
Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS 复制代码 代码如下: input[placeholder], [placeholder], *[p ...
- Html5 input placeholder 属性字体颜色修改。
这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下 Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...
- input的placeholder文字颜色修改
input::-webkit-input-placeholder { color: #D6D0CA !important; /* WebKit browsers / } input:-moz-plac ...
- css3 input placeholder颜色修改方法
css3 input placeholder颜色修改方法<pre> input::-webkit-input-placeholder { /* placeholder颜色 */ color ...
- input placeholder 文字颜色修改
placeholder 文字颜色修改 input::-webkit-input-placeholder{ color:red; } input::-moz-placeholder{ /* Mozill ...
随机推荐
- python数据分析师面试题选
以下题目均非原创,只是汇总 python数据分析部分 1. 如何利用SciKit包训练一个简单的线性回归模型 利用linear_model.LinearRegression()函数 # Create ...
- http 303 307 302 状态码理解
最近在看 <<the rails4 way>> 书中提到了这几个状态码,网上搜到几篇文章 http://www.cnblogs.com/cswuyg/p/3871976.htm ...
- 服务器压力测试 ab
1.ab命令原理 Apache自带的ab命令模拟多线程并发请求,测试服务器负载压力,也可以测试nginx.lighthttp.IIS等其它Web服务器的压力(测试其它服务器时需单独下载ab压力测试工具 ...
- [Java] Collections的简单运用
package test.collections; import java.util.ArrayList; import java.util.Collection; import java.util. ...
- [ActionScript 3.0] AS 实现JSON转换为XML
package com.fylibs.utils { /** * @author:Frost.Yen * @E-mail:871979853@qq.com * @create:2015-12-25 下 ...
- 软件开发过程文档-cgaowei
鸡肋——食之无味,弃之可惜”,软件开发过程文档遭遇了鸡肋一样的境遇. 目前敏捷软件开发过程非常流行.相对于软件开发过程文档,敏捷软件开发过程更加重视可运行的程序.关于软件开发过程文档,两个极端都是不可 ...
- angularJs自定义指令时的绑定
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8& ...
- poj 2253 Frogger dijkstra算法实现
点击打开链接 Frogger Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 21653 Accepted: 7042 D ...
- 【转】又一波你可能不知道的 Linux 命令行网络监控工具
对任何规模的业务来说,网络监控工具都是一个重要的功能.网络监控的目标可能千差万别.比如,监控活动的目标可以是保证长期的网络服务.安全保护.对性能进行排查.网络使用统计等.由于它的目标不同,网络监控 ...
- ORACLE快速彻底Kill掉的会话(转载)
转载:http://www.cnblogs.com/kerrycode/p/4034231.html 在ORACLE数据库当中,有时候会使用ALTER SYSTEM KILL SESSION 'sid ...