HTML5 input Placeholder(占位符)样式
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; } /* ie */ input:-moz-placeholder { color:#f00; } /* individual: 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; } /* individual: 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文字的字体、颜色和风格。你甚至可以将文本框的placeholder以动画方式显示。 美化你的文本框都是些看起来很小的事情,但对于一些交互式的网站来说,成功的关键就在于细节。现在IE10里也只支持placeholder了,相信越来 越多的人会使用这种原生的placeholder效果。
很赞哦! ( 0
)
相关文章
- 什么是Upstream?
- Nodejs 内容管理系统 DoraCMS 2.1.6 发布
- Visual Studio Online 更新!更好支持Docker、Python、Go、C++
- 利用 html2canvas 生成文章缩略图
- 纪录片《穹顶之下》全集103分钟1080P高清完整视频
- DoraCMS v2.1.5 版本更新
- DoraCMS v2.1.2 Docker 版本(生产环境)
- Nodejs 内容管理系统 DoraCMS 2.1.4 发布
- DoraCMS 插件化探索(一)
- DoraCMS 2.1.4 关于 '指定用户' 功能的优化说明
- DoraCMS 2.1.4 (发布版非源码) 抢先体验
- angularjs filter 详解