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 ...
随机推荐
- 程序员遇到Bug时的30个反应
开发应用程序是一个非常有压力的工作.没有人是完美的,因此在这个行业中,代码中出现bug是相当普遍的现象.面对bug,一些程序员会生气,会沮丧,会心烦意乱,甚至会灰心丧气,而另一些程序员会依然保持冷静沉 ...
- Android 开发中常用 ADB 命令总结
adb 的全称为 Android Debug Bridge,就是起到调试桥的作用.通过 adb 我们可以在 Eclipse 中方便通过 DDMS 来调试 Android 程序,说白了就是 debug ...
- 第3章 System V IPC
3.1 概述 System V IPC 包含:System V消息队列.System V信号量.System V共享内存. 3.2 key_t 键和 ftok函数 这三种类型的System V IPC ...
- C++学习34 模板类
C++除了支持模板函数,还支持模板类.模板类的目的同样是将数据类型参数化. 声明模板类的语法为: template<typename 数据类型参数 , typename 数据类型参数 , …&g ...
- nyoj 92 图像有用区域
点击打开链接 图像有用区域 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 "ACKing"同学以前做一个图像处理的项目时,遇到了一个问题,他需要摘取 ...
- (easy)LeetCode 226.Invert Binary Tree
Invert a binary tree. 4 / \ 2 7 / \ / \ 1 3 6 9 to 4 / \ 7 2 / \ / \ 9 6 3 1 Trivia:This problem was ...
- 蓝桥杯---地宫取宝(记忆搜索=搜索+dp)
题目网址:http://lx.lanqiao.org/problem.page?gpid=T120 问题描述 X 国王有一个地宫宝库.是 n x m 个格子的矩阵.每个格子放一件宝贝.每个宝贝贴着价值 ...
- Spark ThriftServer使用的大坑
当用beeline连接default后,通过use xxx切换到其他数据库,再退出, 再次使用beeline -u jdbc:hive2://hadoop000:10000/default -n sp ...
- MySQL数据库优化技术概述
对于一个以数据库为中心的应用,数据库的优化直接影响到程序的性能,因此数据库性能至关重要.一般来说,要保证数据库的效率,要做好以下几个方面的工作: 1. 数据库表设计: 表的设计合理化(符合3NF): ...
- RDD缓存策略
Spark支持将数据集放置在集群的缓存中,以便于数据重用. Spark缓存策略对应的类: class StorageLevel private( private var useDisk_ : Bool ...