全国统一热线:
028-86758058
18980748058
购买流程
付款方式
常见问题
在线提问
续租服务
购物车(
0
件)
用户名:
密 码:
记住
首 页
HOME
域名注册
DOMAIN
虚拟主机
WEB HOST
成品网站超市
AUTO Site
VPS主机
VPS SERVER
云 主 机
CLOUD HOST
租用托管
SERVER
海外主机
HK HOST
代理专区
AGENT
客服中心
SERVICE
站长教程
SERVICE
欢迎光临西部数据云计算中心,我们将竭诚为您提供最优质的服务!
中文域名
域名转入
域名转出
DNS管理
动态域名
获取域名证书
域名停放
域名过户
集群主机
双线主机
基本主机
港台主机
论坛主机
Linux主机
Vip合租主机
超G型主机
ASP.net主机
Java主机
智能建站主机
网店主机
美国主机
数据库
成品网站超市
智能建站主机
集群VPS主机
国内VPS主机
香港VPS主机
美国VPS主机
云主机介绍
云主机购买
服务器租用
主机托管
常见问题
香港主机
港台主机
美国主机
国内免备案
步骤流程
代理级别
代理合同
代理模式
代理优势
在线申请
产品列表
常见问题
代理商分布图
常见问题
有问必答
跟踪提问
购买流程
产品价格
付款方式
常用软件
网站备案
续租服务
汇款确认
相关文档
联系我们
域名资讯
主机资讯
行业动态
网页制作
php教程
mysql教程
域名资讯
云计算资讯
网络编程
您当前的位置:
首页
>
网络编程
>
网站制作
html5配合css3实现带提示文字的输入框(摆脱js)
时间:1970-01-01 来源:互联网 作者:佚名
很久没写过技术文章了,最近一直在以Webkit作为载体开发系统,当然需要大量使用Html5与CSS3,不仅减少大量的JS还可以保证更流畅。
当选中对话框后,提示文字变浅色,输入后消失.这个现在通行的做法是在Input标签后面增加一个Label。使用JS控制。
HTML5出现后,我们有一个更好的方法。
复制代码
代码如下:
<input type="text" placeholder="用户名或邮件地址" name="username"/>
我们看到有placeholder标签,可以作为用户文字提示。这样子就非常方便了。但是为了最求完美,我们需要在选中后,将文字变浅,或者修改提示文件的样式,我们该怎么办?
复制代码
代码如下:
input::-webkit-input-placeholder {
color: #999;
-webkit-transition: color.5s;
}
input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {
color: #c2c2c2;
-webkit-transition: color.5s;
}
-webkit-input-placeholder,webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登录、搜索等位置很适合。当然你要为了兼容IE6,这个方法是行不通。不过Ie9也支持placeholder标签,就是无法修改它的颜色而已。
那么,如果不支持该怎么办?可以简单直接使用Jquery帮忙,那么在就不在本文讨论范围了。
给一个Demo,Demo地址 必须在Webkit浏览器下才看到完整效果。是不是很方便?
来顶一下
返回首页
推荐资讯
从零开始学ASP.NET-基础篇第1/7页
第一天 学习目的: 掌握最基本的Label、TextBox、Button控件
ASP.NET入门数据篇
对于网站编程的初学者来说,总是会上网找些源码来看,但久而
相关文章
php实现input输入框失去焦点自动保存输入框的数据
php str_replace 输入框回车替换br
网页设计关于表单输入框的技巧代码
网页输入框的样式触发效果
网页设计中文本输入框的一些参数说明
网页设计关于表单输入框的技巧代码
让输入框关闭自动完成(AutoComplete)功能
常用input文本框内容自动垂直居中并默认提示文字单击为
div可以输入内容不用input作为输入框屏蔽自动的input样
网页设计中文本输入框的一些参数说明
栏目更新
栏目热门
返回首页
关于我们
联系我们
付款方式
价格总览
资讯中心
友情链接
媒体关注
有问必答
投诉建议
网站备案
《中华人民共和国增值电信业务经营许可证》编号:川B2-20080058号
官方网址:
xibushuju.com
西部数据
Copyright © 2002~2015
西部数据官网
版权所有
电话总机:
028-86758058
(50线) 传真:
028-86758058