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 ...
随机推荐
- C#EasyHook例子C# Hook 指定进程C#注入指定进程 z
http://bbs.msdn5.com/thread-75-1-1.html http://pan.baidu.com/s/1pJDgHcR
- SPR EAD NET 6
SPR EAD_NET6 下载地址 http://www.gcpowertools.com.cn/downloads/trial/Spread.NET/EN_SPREAD_NET6_SETUP_RA_ ...
- JAVA如何将PDF转换SWF格式的FLASH
1. 需要用到的工具 SWFTools 下载地址 http://www.swftools.org/download.html,下载完成以后,直接安装就行 2.下面就是重点喽,详见Java代码解析 附 ...
- EDE,DEDE网站搬家,DEDECMS搬家教程,一看就会
无聊做个小教程:DEDE搬家,本人提供搬家 先来说下DEDE 大家会安装吧,不多说,看图 一.进入织梦DedeCms的后台备份数据库 步骤:系统 –> 数据库备份/还原 -> 全选有所织梦 ...
- C++学习9 this指针详解
this 是C++中的一个关键字,也是一个常量指针,指向当前对象(具体说是当前对象的首地址).通过 this,可以访问当前对象的成员变量和成员函数. 所谓当前对象,就是正在使用的对象,例如对于stu. ...
- 搭建一个springmvc helloworld程序
1.加jar包,需要8个,从springframework里面选 logging core aop context expression bean web webmvc 2.配置web.xml,在文件 ...
- struts2中action中的通配符
struts中一个正常的最普通不过的action是这样子的 <package name="default1" namespace="/gys" exten ...
- html 去掉input 获取焦点时的边框
html中,当input标签获取焦点的时候(例如,当光标放在input框中准备输入值时), input标签外围会出现边框,有的时候我们需要去掉这个边框,可以使用css的outline:none;属性将 ...
- Win2008远程多用户登陆的配置方法 另附详细设置: Windows server 2008 R2实现多用户远程连接
Win2008远程多用户登陆的配置方法 在使用Windows 2008远程登录功能时,如果需要进行多用户登录,可以采用以下配置方法: 首先要启用远程桌面这一功能:右击“我的电脑”→ 属性 → ...
- leetcode 349:两个数组的交集I
Problem: Given two arrays, write a function to compute their intersection. 中文:已知两个数组,写一个函数来计算它们的交集 E ...