【CSS】input 框的一些事情
1.input框光标太长与不居中的问题
如果input框height:40px 为了字体垂直居中line-height也设为40px
问题来了,这样光标在刚刚focus时候是占据整个input框并且输入的时候会顶到上边框,与下边框有距离,看起来很诡异。
为了解决这个问题,最好的方法就是input的height设为字体高度,然后在用padding来填充所需高度,这样就可以完美解决了~
2.placeholder内容点击时候清空
这个功能虽然并没有什么卵用,可是产品要求,也只能去实现,直接上代码:
<input class="codeInput" type="text" name="exCode" placeholder="请输入红包口令" onfocus="this.placeholder = ''" onblur="this.placeholder = '请输入红包口令'" maxlength="8"/>
3.实时监听input内容的变化。
需要实现的效果是输入验证码到8位时候,提交按钮改变颜色,不足八位时候就恢复暗色。change事件只有在光标离开时候才被触发,keyup事件在iPhone与某些安卓机时候对于粘贴到输入框的字符并无响应,经过测试只有input事件比较完美的解决了需求。
function inputChange(){
$(".codeInput").on("input",function(){
var codeLength = $(".codeInput").val().length;
if(codeLength == 8){
$(".codeVerify").css("color","#fff");
}else{
$(".codeVerify").css("color","rgba(255,255,255,.3)")
}
})
}
4.iPhone下input默认样式圆角禁用
移动端给input设置的样式都不起作用,wtf!原来全局样式中没有禁用ios的默认圆角样式
input {
-webkit-appearance: none;
}
完美解决~
【CSS】input 框的一些事情的更多相关文章
- css中input框不可点击+首行缩进
Css 1)text-indent::首行缩进 2)disabled="true"设置input框不可以点击 3)Css:xx!important:声明提前优先级最高..!impo ...
- CSS渐变字体、镂空字体、input框提示信息颜色、给图片加上内阴影、3/4圆
1.渐变字体 主要是看:-webkit-background-clip: text; 该属性 <style> .b1{ width: 500px; height: 200px; font- ...
- input框focus时的美化效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 类似input框内最右边添加图标,有清空功能
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- input固定定位后,当input框获取到焦点时,会离开手机软键盘的解决方法
前些天做页面时候遇到这样一个问题,将input框用position:fixed固定定位在最底部的时候,当Input获取焦点的时候,input框离开了手机软键盘,而不是吸附在软键盘上,效果如下图: 找了 ...
- 点击按钮文字变成input框,点击保存变成文字
<!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content ...
- 小实例---关于input宽度自适应以及多个input框合并拆分
前两个月,公司内部需要开发关于大数据方面的辅助工具语料分词系统,在这个项目中遇到以下几个主要问题,在此分享~ 一.input宽度根据内定文本宽度自适应 背景:项目需求中,前台展示,需要从后台获取的.t ...
- 解决input框自动填充为黄色的问题
题原因:input 框会自动填充一个颜色 如图所示 解决方法 :通过动画去延迟背景颜色的显示 代码如下 input:-webkit-autofill, textarea:-webkit-auto ...
- jQuery实现input框输入值动态搜索
我们在平时的前端开发中,经常会遇到添加数据,如果在添加之前要指定某个用户或对象进行关联,那在实现上要比普通的添加要繁琐一点.我本来的想法是给一个iframe,在 里面显示所有的数据并提供一个筛选的功能 ...
随机推荐
- elasticsearch 关联单词查询以及Shingles
Shingle Token Filter A token filter of type shingle that constructs shingles (token n-grams) from a ...
- Dubbox本地 JAR包部署与安装
Dubbox的jar包并没有部署到Maven的中央仓库中,大家在Maven的中央仓库中可以查找到Dubbo的最终版本是2.5.3 , 阿里巴巴解散了Dubbo团队后由当当网继续维护此项目,并改名为 D ...
- case when使用的总结
https://blog.csdn.net/changxiangyangy/article/details/86718551 前几天,为了给产品分析当前用户数据结构,写sql的时候使用到了case w ...
- webpack第一节(1)
跟着慕课网的老师做了下笔记 webpack是一个前端打包工具 它可以优化网页.例如 页面模块化加载.图片优化.css.js压缩等等. 模块化加载也就是懒加载,按需加载,以前的模式是所以得css写在一起 ...
- Ubuntu如何安装谷歌Chrome浏览器
这里提供一个Ubuntu安装谷歌浏览器的简单方法. 1. 下载谷歌浏览器安装包 wget https://dl.google.com/linux/direct/google-chrome-stable ...
- ZOJ 1610 Count the Colors (线段树区间更新与统计)
Painting some colored segments on a line, some previously painted segments may be covered by some th ...
- thinkphp 根据文件后缀的不同返回不同的结果
** * 根据文件后缀的不同返回不同的结果 * @param string $str 需要判断的文件名或者文件的id * @return integer 1:图片 2:视频 3:压缩文件 4:文档 5 ...
- centos6 sersync2使用
接收端rsyncd搭建 http://www.cnblogs.com/hanxiaohui/p/8675409.html 推送端sersync2使用 安装 源码包D:\share\src\sersyn ...
- 【进阶技术】一篇文章搞掂:Docker
注意!!注意系统内存,一开始我使用阿里云1核1G系统,各种问题,搞了几天,原来是内存不足 一.使用VM虚拟机,安装CentOS7.X系统,并安装和使用Docker 1.1.虚拟机安装CentOS7.X ...
- 【C#、阿里云、Tomcat、XP系统】c#下使用.NET4.0中HttpWebRequest访问Tomcat中HTTPS项目时,在XP系统中超时
情景: 1.使用Java开发的Web项目,部署在服务器Tomcat中 2.项目使用HTTPS,使用阿里云的PFX证书 阿里云推荐Tomcat配置如下 <Connector port=" ...