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 ...
随机推荐
- 第6章 System V消息队列
6.1 概述 System V消息队列在内核中是list存放的,头结点中有2个指针msg_first 和msg_last.其中每个节点包含:下个节点地址的指针.类型.长度.数据等. 6.2 函数 6. ...
- DataTable.select() 返回 DataTable
DataTable.select() 默认返回值为 DataRow[]数组 代码来自网络: /**/ /// <summary> /// 执行DataTable中的查询返回新的DataTa ...
- 使用mustache.js 模板引擎输出html
看了https://mustache.github.io/你就知道mustache是非常强大的模板引擎,支持多种语言,下面是个简单入门例子: MVC Model public class Studen ...
- ResultSet的Type
st = conn.prepareStatement(sql.toString(), ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_READ_ ...
- ASP.NET MVC 4 部署到 Windows Azure 如何轉換時區設定
由於公司慢慢地開始將新的專案都移往 Windows Azure 雲端平台做網站代管,漸漸地也開始遇到一些小問題,這些問題在還沒上雲端之前通常不會發生,像我們這次遇到的問題就跟顯示時間有關.由於 Win ...
- python 如何找到某一目录下的文件类型(三种方法)
#!/usr/bin/env python import glob import os os.chdir(“./”) for file in glob.glob(“*.py”): print file ...
- 关于显示gif的一些方法与讨论
http://www.2cto.com/kf/201404/292468.html http://www.eoeandroid.com/forum.php?mod=viewthread&tid ...
- 使用Spring的Property文件存储测试数据 - 添加测试数据
测试数据直接写在Property文件中,如下图: application.properties是系统自动生成,我添加了两个Property文件:HomeTestData.properties和moto ...
- sc delete 服务器名提示“指定的服务已经标记为删除”
症状:停止服务后,右键无法点击“启动”,打开命令输入SC删除服务后提示如标题描述 原因:进程还在 解决方案:打开任务管理器,进程,找到你的已停止服务名,右键,结束进程,再操作即可删除服务
- 数据库中GUID的生成
GUID, 即Globally Unique Identifier(全球唯一标识符) 也称作 UUID(Universally Unique IDentifier) . GUID是一个通过特定算法产生 ...