HTML5 input Placeholder(占位符)样式

 placeholder 属性

placeholder(占位符)在实际的应用中非常常见,主要用作提示输入内容,现代浏览器都支持:
 
<input placeholder="搜索" type="text">
placeholder 样式
 
这里网上搜索了一下 placeholder 样式相关知识,分享一下:
 
/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* Internet Explorer 10+ */
:-moz-placeholder { color:#f00; } /* firefox 14-18 */
 
/*  webkit 私有 */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
 
/* mozilla 私有 */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
可以看出placeholder 伪类样式还是相对丰富的。

时间: 2024-11-02 07:20:26

HTML5 input Placeholder(占位符)样式的相关文章

CSS3占位符伪元素浅析

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 HTML5的特性曾经充斥着各种互联网社区,现在,它的特性越来越多的被各种浏览器所支持 ,我们可以使用它的更多的功能,如自定义文本的外观 ::input-placeholder CSS伪元素,无论输入什么字段,该元素都为我们提供了一个符合设计标准的占位符文本的样式. 占位符文本的样式 浏览器预定义的样式,可以通过占位符属性显示文本.默认情况下,

javascript 文本框水印/占位符(watermark/placeholder)实现方法_javascript技巧

Firefox/Chrome/Opera从某一版本开始已经支持这一特性,但ie系列即使是ie9也还不支持,所以需要通过javascript来兼容这些不支持placeholder特性的浏览器. 普遍的做法 现在普遍使用的做法是通过表单元素的onfocus/onblur事件来改变value值,如下: 复制代码 代码如下: <input type="text" id="text1" /> <script> var el = document.get

iOS中修改UITextField占位符字体颜色的方法总结_IOS

前言 最近学了UITextField控件, 感觉在里面设置占位符非常好, 给用户提示信息, 于是就在想占位符的字体和颜色能不能改变呢?下面是小编的一些简单的实现,有需要的朋友们可以参考. 修改UITextField的占位符文字颜色主要有三个方法: 1.使用attributedPlaceholder属性 @property(nullable, nonatomic,copy) NSAttributedString *attributedPlaceholder NS_AVAILABLE_IOS(6_0

使用Dreamweaver占位符创建Fireworks文件

dreamweaver|创建 图像占位符允许用户指定Dreamweaver中将来放置的Fireworks图像的大小和位置,可以让我们在网页创建最终的图片之前尝试采用各种不同的网页布局,从而将Fireworks和 Dreamweaver的功能综合运用,发挥二者的强大功能. 在使用Dreamweaver图像占位符创建Fireworks图像时,系统会用与所选占位符尺寸相同的画布创建一个新的Fireworks文档.一旦Fireworks使用结束并且返回到 Dreamweaver,所创建的新Firewor

wps演示教程:文本占位符的特点与使用

占位符是用来占位的符号,是一种带有虚线或阴影线边缘的框,经常出现在演示文稿中模板中,分文本占位符.表格占位符.图表占位符.媒体占位符和图片占位符等类型. 文本占位符占住位置后,可以往里面添加内容.文本占位符在幻灯片中表现为一个虚框,虚线框内部往往带有"单击此处添加标题"之类的提示语,鼠标左键单击之后,提示语会自动消失,出现一个竖线显示光标位置,用户可以输入内容. 图 1 在文本占位符内输入的文字能在大纲视图中预览,并且按级别不同位置有所不同. 图 2 用户可以通过在大纲视图中选中文字进

PowerPoint如何在占位符中插入图表

占位符中包含"插入图表"按钮,用户可以运用该按钮快速插入图表. 步骤1:按[Ctrl+N]组合键,新建一个演示文稿,在"开始"面板的"幻灯片"选项板中,单击"新建幻灯片"下拉按钮,在弹出的列表框中选择含有图表的版式,如下图所示. (双显示器设置:如何设置一台电脑两个显示器http://www.woaidiannao.com/html/syjq/6546.html ) 步骤2:执行操作后,即可新建幻灯片,在占位符中单击"

给TextView添加占位符

// // HYBTextView.h // // Created by huangyibiao on 14-6-3. // Copyright (c) 2014年 huangyibiao. All rights reserved. // #import <UIKit/UIKit.h> /*! * @brief 继承于UITextView,添加了placeholder支持,就像UITextField一样的拥有placeholder功能 * @author huangyibiao */ @int

深入Spring Boot:那些注入不了的Spring占位符(${}表达式)

Spring里的占位符 spring里的占位符通常表现的形式是: <bean id="dataSource" destroy-method="close" class="org.apache.commons.dbcp.BasicDataSource"> <property name="url" value="${jdbc.url}"/> </bean> 或者 @Confi

javascript-做了一个占位符 但是每次点开相关的链接 不能再占位符上显示 而是直接新打开了一个窗口

问题描述 做了一个占位符 但是每次点开相关的链接 不能再占位符上显示 而是直接新打开了一个窗口 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>Snapshots</h1> <