$.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默认颜色修改的更多相关文章

  1. IE10以下兼容H5中的placeholder 以及改变它默认颜色

    placeholder是H5<input>的属性之一,可惜在IE10以下不支持,万恶的IE!不过正因为有IE,才多了很多捣鼓,添了乐趣.不支持就不支持呗,自己动手丰衣足食,我们可以用js模 ...

  2. input,select默认颜色修改

    input::-webkit-input-placeholder{color: #7f7f7f;} select{color: #7f7f7f} option{color: #7f7f7f;}

  3. 修改输入框placeholder文字默认颜色-webkit-input-placeholder

    html5为input添加了原生的占位符属性placeholder,高级浏览器都支持这个属性,例如: <input type="text" placeholder=" ...

  4. 【css】修改placeholder 默认颜色

    html5为input添加了原生的占位符属性placeholder,高级浏览器都支持这个属性,例如: <input type="text" placeholder=" ...

  5. HTML5 input placeholder 颜色修改示例

    Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS 复制代码 代码如下: input[placeholder], [placeholder], *[p ...

  6. Html5 input placeholder 属性字体颜色修改。

    这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下     Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...

  7. input的placeholder文字颜色修改

    input::-webkit-input-placeholder { color: #D6D0CA !important; /* WebKit browsers / } input:-moz-plac ...

  8. css3 input placeholder颜色修改方法

    css3 input placeholder颜色修改方法<pre> input::-webkit-input-placeholder { /* placeholder颜色 */ color ...

  9. input placeholder 文字颜色修改

    placeholder 文字颜色修改 input::-webkit-input-placeholder{ color:red; } input::-moz-placeholder{ /* Mozill ...

随机推荐

  1. ubuntu 格式化U盘,并制作系统镜像

    1. 先要卸载U盘,使用如下命令: #umount /dev/sdb1 注意:/dev/后面的设备要根据你的实际情况而定,否则后面格式化,丢失数据!! 格式化U盘,并建立vfat文件系统 #mkfs. ...

  2. arraylist linkedlist性能测试

    import java.util.ArrayList; import java.util.LinkedList; import java.util.List; import java.util.Ran ...

  3. 解决Web部署 svg/woff/woff2字体 404错误(转)

    http://blog.sina.com.cn/s/blog_4997f1b90102vkjn.html 最近项目中用到了fontawesome-webfont.svg等字体.部署项目后,发现没有&l ...

  4. Visual Studio 2015正式版/产品密钥 Win10正式版官方原版ISO镜像下载大全&安装激活教程

    Visual Studio 2015  发行说明: https://visualstudio.com/zh-cn/news/vs2015-vs.aspx Visual Studio  2015 特性简 ...

  5. django 获取系统当前时间 和linux 系统当前时间不一致 问题处理。

    问题场景: 在django admin models 实体对象添加一个属性最后修改时间,用户在添加.修改是系统自动修改操作时间. UpdateTime自动获取系统时间.并且自动修改. 代码设置如下. ...

  6. [SQL]公交新路问题

    --解答一 CREATE TABLE T_Line( ID nvarchar(), --公交线路号 Station nvarchar(), --站点名称 Orders int) --行车方向(通过它反 ...

  7. HDU 5808[数位dp]

    /* 题意: 给你l和r,范围9e18,求l到r闭区间有多少个数字满足,连续的奇数的个数都为偶数,连续的偶数的个数都为奇数. 例如33433符合要求,44不符合要求.不能含有前导零. 思路: 队友说是 ...

  8. SQL Server 2012 Enterprise Core Edition和SQL Server 2012 Enterprise Edition的区别

    core没有图形界面,只有power shell界面,给没有图形界面的windows用的.

  9. Android 使用NineOldAndroids实现绚丽的ListView左右滑动删除Item效果

    本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/18311877) 今天还是给大家带来自定义控件的编写,自定义一个Lis ...

  10. Jsp:useBean标签的使用

    1.<jsp:useBean id="为Bean起的别名(随意起)" class="Bean的目录,从包名开始写" scope="page | ...