使用input + label替代placeholder
来源:互联网 发布:淘宝达人2c 编辑:程序博客网 时间:2024/06/01 09:23
HTML
<div class="input-wrapper"> <input id="inputID" type="text"> <label for="inputID">请输入...</label></div>
Style
.input-wrapper { width: 300px;height: 42px;margin-bottom: 20px;position: relative;}.input-wrapper input { width: 290px; height: 36px; line-height: 36px; padding: 2px 4px; border: 1px solid #DAE5E6; background: #F2FEFF none repeat scroll 0% 0%; font-family: tahoma,arial,simsun,sans-serif;}.input-wrapper label { width: 290px; height: 36px; line-height: 36px; padding: 3px 5px; font-family: simsun; font-size: 14px; color: #999; **cursor: text; position: absolute; top: 0px; left: 0px;**}
JS
$(".input-wrapper").on("input", function() { var v = $(this).find('input').val(); if (v == null ||v == "") { $(this).find('label').css("display", "block"); } else { $(this).find('label').css("display", "none"); }}).trigger("input");
阅读全文
0 0
- 使用input + label替代placeholder
- CSS JQuery input+label实现placeholder效果
- input+label使用
- easyui combobox中input placeholder的替代方法
- input placeholder
- 使用CSS修改HTML5 input placeholder颜色
- 使用CSS修改HTML5 input placeholder颜色
- 使用CSS修改HTML5 input placeholder颜色
- Label With Placeholder
- Label标签结合input标签使用功能
- input属性placeholder
- HTML 5 <input> placeholder
- input兼容placeholder
- 使用DIV+css中的label.input来编写注册表单
- input+div 替代 select
- input和label标签
- html5 input 默认数据 placeholder
- HTML 5 <input> placeholder 属性
- 【JavaWeb笔记】服务器、HTTP协议
- 两个完整正则,如何搭建"或"的关系?
- openmv学习
- 如何用一张图片代替 'input:file' 上传本地文件??
- H5解析 | 3个套路就能制作如此火爆的“一镜到底”H5
- 使用input + label替代placeholder
- BT渗透
- 记录
- java 设计模式六大原则
- Ruby学习笔记(18)_冒号用法
- Rxjava2.x 封装总结
- 用vmware装的黑苹果终于可以上网了
- java中关于String、StringBuffer和StringBuilder
- 一个子查询涉及的索引位置问题