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 ...
随机推荐
- 用java程序调用ffmpeg执行视频文件格式转换flv
用java小例题说明更直观:(可以直接编译运行)环境我在windows平台下测试的...需要在e:/下有ffmpeg.exe;mencoder.exe;drv43260.dll;pncrt.dll共4 ...
- UBUNTU查看软件版本
1.查看已安装软件版本aptitude show softwarename 2.查看软件安装目录dpkg -L softwarename
- ruby的optparse使用小记
#自定义转换器 1 opts.accept(Hash) do |string| hash = {} string.split(',').each do |pair| key,value = pair. ...
- ruby1.8到2.1语法改变
1定义hash的语法改变old_way = {:foo => "bar", :one => 1}new_way = {foo: "bar", one ...
- angularjs之表达式
一:angularjs表达式的解析 angularjs会在运行$digest循环中自动解析表达式,但有时手动解析表达式也是非常用用的. angularjs通过$parse这个内部服务来进行表达式的运算 ...
- nyoj 71 独木舟上的旅行
点击打开链接 独木舟上的旅行 时间限制:3000 ms | 内存限制:65535 KB 难度: 描述 进行一次独木舟的旅行活动,独木舟可以在港口租到,并且之间没有区别.一条独木舟最多只能乘坐两个人 ...
- .NET调用Java写的WebServices(可能会碰到的问题)
1)net中定义的的WebService(返回值和参数都是自定义对象)可以被Java识别并调用,可是在Java中定义的WebService(返回值和参数都是自定义对象),C#客户端可以识别到自定义对象 ...
- x86_64平台编译链接汇编程序
assemble: nasm -f elf32 sample.asm -l sample.lst link: ld -m elf_i386 -o test sample.o io.o
- JavaScript对象的创建之动态原型方式
为了让定义的方式更加符合java的需求,就把定义方法的原型代码放置在Person这个构造函数中. function Person(name,age,friends){ //属性在构造函数中定义 thi ...
- SQL Server设置主键自增长列
1.新建一数据表,里面有字段id,将id设为为主键 create table tb(id int,constraint pkid primary key (id)) create table tb(i ...