html5配合css3实现带提示文字的输入框(摆脱js)_html5教程技巧

来源:脚本之家  责任编辑:小易  

H5的新特性:1.用于绘画 canvas 元素。2.用于媒介回放的 video 和 audio 元素。3.本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除。4.语意化更好的内容元素,比如 article、footer、header、nav、section。5.表单控件,calendar、date、time、email、url、search。css3的新特征:选择器。2.和透明度。3.多栏布局。4.多背景图。5.Word Wrap。6.文字阴影。7.@font-face属性。8.圆角(边框半径)。9.边框图片。10.盒阴影。11.盒子大小。12.媒体查询。13.语音www.zgxue.com防采集请勿采集本网。

很久没写过技术文章了,最近一直在以Webkit作为载体开发系统,当然需要大量使用Html5与CSS3,不仅减少大量的JS还可以保证更流畅。

 

HTML5是HTML的最新标准版本,而css3则是css的最新标准版本。平时大家说HTML5+CSS3,其实指的就是利用这利用HTML5+CSS3组合,可能简单几行代码就能够实现以前需要很多代码配合js才能实现的功能。

当选中对话框后,提示文字变浅色,输入后消失.这个现在通行的做法是在Input标签后面增加一个Label。使用JS控制。

这些元素纯粹是为画面展示服务的,HTML5中提倡把画面展示性功能放在css中统一编辑。2、不再使用frame框架。frameset、frame、noframes。HTML5中不支持frame框架,只支持iframe框架,或者用服务器方创建的

HTML5出现后,我们有一个更好的方法。 

最简单的用 横竖线可以用hr实现 还有border,outline 配合新属性border-image 可以做边框环绕,其他复杂线条可以用 canvas svg 画出。宁外用table和 多栏布局 也可以做出边线效果。

复制代码代码如下:

其实html和html5 概念是一样的,只是html5 是新增了一部分新的标签元素,html5通常配合css3可以做出一些比较炫酷的效果。但是由于兼容性目前不是很高,特别的IE,微软中喜欢做自己。所以还是比较

<input type="text" placeholder="用户名或邮件地址" name="username"/>

用html5是需要css javascrip的。css是必须要用到的,如果不使用css,网页内容就不会被更好的美化和CSS3是更美的皮肤 JavaScript控制单个动作。(形象比喻为抬手,张嘴,放下手,抬腿,转头,握拳等)

我们看到有placeholder标签,可以作为用户文字提示。这样子就非常方便了。但是为了最求完美,我们需要在选中后,将文字变浅,或者修改提示文件的样式,我们该怎么办?

复制代码代码如下:

其实html和html5 概念是一样的,只是html5 是新增了一部分新的标签元素,html5通常配合css3可以做出一些比较炫酷的效果。但是由于兼容性目前不是很高,特别的IE,微软中喜欢做自己。所以还是比较

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浏览器下才看到完整效果。是不是很方便?

html5其实没有什么知识点,关键是Javascript和css3.0,要想做应用,必须学Javascript,这是最重要的内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • html5实现输入框字数限制提示抖动效果
  • html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • html5 虚拟键盘出现挡住输入框的解决办法
  • html5为输入框添加语音输入功能的实现方法
  • 详解移动端html5页面端去掉input输入框的白色背景和边框(兼容android
  • html5去掉输入框type为number时的上下箭头的实现方法
  • 据说HTML5现在很火,我要只学HTML5,同时在配合着CSS等前台技术,怎样? 我希望可以把HTML5学精,可以
  • h5和css3有哪些新特性
  • html5常用标记及用法?
  • 做HTML5前端工程师需要考什么证吗?
  • html5+css3和div+css有什么区别?
  • html5新增和废除的标签有哪些
  • html5 css3 实现边线有几种
  • 怎样把html改写成html5?
  • 用html5还需要css javascrip吗
  • html的锚链接具体怎么用
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5提示文字html5实现输入框字数限制提示抖动效果html5新标签datalist实现输入框与后台数据库数据的动态匹配html5 虚拟键盘出现挡住输入框的解决办法html5去掉输入框type为number时的上下箭头的实现方法html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解html中meta标签及keywords详解移动端h5页面根据屏幕适配的四种方案html5移动端自适应布局的实现html里显示pdf、word、xls、ppt的方法示例html5 直播疯狂点赞动画实现代码 附源码html5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷canvas 基础之图像处理的使用用canvas显示验证码的实现html5给汉字加拼音收起展开组件的实现代码iphonex安全区域(safe area)底部小黑条在微信小程序和
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved