CSS:与input相关的一些样式设置问题
input是HTML中非常重要,非常常用而又不可替代的元素,在于其相关的样式设置中有时会遇到其他元素不会发生的问题,今天把我印象中的一些小问题和解决方案记录一下。
1.与同行元素上下居中对齐
关于上下居中的话题还是比较热门的,过几天也想专门总结一下元素各种上下居中的方法,今天简单说说关于input的特殊方法。
最推荐的是flex布局模式,掌握flex布局方式后会发现居中特别简单,而且在现代浏览器中都兼容这种布局方式。
对于块元素,可能自适应的居中方式需要绝对定位了,
position:absolute;
top:0;
bottom:0;
或者
position:absolute;
top:50%;
left:50%;
transform:translate(-50%;-50%);
这些适用于块元素的方法都能应用于行内块元素input,但是感觉太麻烦了,而且脱离了文档流,对后面元素的布局造成了影响。
对于行内元素,
vertical-align:middle;
是一种很方便的方法,但是貌似input等行内块元素不吃这一套。
有一种取巧的方法,
height:父元素高度;
line-height:父元素高度;
border:none;
outline:none;
就是input元素占满所处空间,让input的文字居中即可。因为为了美观,input的边框基本都会被去掉,input的范围不可见,那么让文字居中同样实现了效果,还很方便,在条件适合的时候这种方式个人感觉很实用。
2.placeholder颜色设置
这个没什么好说的,方法记一下就好
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #000; opacity:1;
} ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #000;opacity:1;
} input:-ms-input-placeholder{
color: #000;opacity:1;
} input::-webkit-input-placeholder{
color: #000;opacity:1;
}
也可以同时设置字号等
input::-webkit-input-placeholder { /* WebKit browsers*/
color:#999;font-size:14px;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18*/
color:#999;font-size:14px;
}
input::-moz-placeholder { /* Mozilla Firefox 19+*/
color:#999;font-size:14px;
}
input:-ms-input-placeholder { /* Internet Explorer 10+*/
color:#999;font-size:14px;
}
3.设置input弹出软键盘的type与其type属性不同
这个需求看起来莫名其妙,其实还是有他存在的理由的,比如点击一个输入框,弹出数字键盘,但是用户还可以输入数字以外的内容。
什么时候有这种需求呢?比如输入身份证号码,有的人需要输入“X”,所以type应该是text。但是所有人都要从数字开始输入,弹出字母键盘就不太舒服了。
那怎么实现呢
type="number"
onfocus="this.type='text'"
默认是number类型的,用户点击时弹出的也是数字键盘,而点击过后input获取到焦点出发onfocus事件,这时输入字母就也是允许的了。如果细心的话在onblur时再把type改回number就可以重复这样的操作了,没毛病。
CSS:与input相关的一些样式设置问题的更多相关文章
- css 更改input radio checkbox的样式
html <label> <input type="checkbox" class="colored-blue"> <span c ...
- css修改input表单默认样式重置与自定义大全
链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...
- 利用CSS 修改input=radio的默认样式(改成选择框)
html部分: <input id="item2" type="radio" name="item"> <label fo ...
- CSS修改input[type=range]滑块样式
input[type="range"]是html5中的input标签新属性,样子如下: <input type="range" value="4 ...
- css取消input、select默认样式(手机端)
IOS端: background-color:transparent; border-color:transparent; andorid端: 仅仅使用上面的代码还不够,可以发现select框在某些浏 ...
- CSS中关于多个class样式设置的不同写法
html中: <div class="containerA"> 这是AAAAAAAAAAAAAAAAAAAAAAA样式 <div class="cont ...
- 替换input单选框的样式
实现效果:. css的input单选框的样式很丑,有时候不想使用原生的样式,如上照片,可以使用下面的方法. 思路是,给inpu加visibility:hidden隐藏,然后使用不同的图片绝对定位覆盖在 ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- 前端基础-CSS的属性相关设置
一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一. 字体属性 1.font-weight:文字粗细(表格中*为重点) 取值 描述 normal 默认值,标准粗细 ...
随机推荐
- Nginx缓存
一.基于proxy_cache的缓存 worker_processes ; events { worker_connections ; } http { include mime.types; def ...
- 批处理脚本+adb命令
app的测试过程中,有一些重复性的繁琐工作,可以采用用批处理脚本+adb命令方式来代替 说明: (1)等待时间我用的ping命令替代的,比较简单直观 (2)我采取的是用坐标定位,后续会使用控件来定位 ...
- gensim LDA模型提取每篇文档所属主题(概率最大主题所在)
gensim的LDA算法中很容易提取到每篇文章的主题分布矩阵,但是一般地还需要进一步获取每篇文章归属到哪个主题概率最大的数据,这个在检索gensim文档和网络有关文章后,发现竟然没有. 简单写了一下. ...
- gevent模块学习(四)
gevent.spawn会对传入的子任务集合进行调度,gevent.joinall 方法会阻塞当前程序,除非所有的greenlet都执行完毕,才会退出程序 公有方法 gevent.spawn(cls, ...
- Pandas模块
前言: 最近公司有数据分析的任务,如果使用Python做数据分析,那么对Pandas模块的学习是必不可少的: 本篇文章基于Pandas 0.20.0版本 话不多说社会你根哥!开干! pip insta ...
- Firebug: 已拦截跨源请求:同源策略禁止读取位于XXX的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-
第一种,就是在被请求的程序中添加HTTP头,即CORS跨域(跨域资源共享,Cross-Origin Resource Sharing) 如: Response.Headers.Add("Ac ...
- Intellij Idea 解决字符乱码、设定颜色主题、字体
1.写入字符编码设置 2.调整mintty 字体.主题
- 记录PHP的执行时间
网上不少误导信息,实际上这个答案在PHP源码中的Zend文件夹下bench.php是有的 在此纠正下网络上复制粘贴造成的错误.希望后来人少踩点坑. function getmicrotime() { ...
- shell脚本实现git和svn统计log代码行
实现的功能 git 根据传入的三个参数:起始统计日期.结束统计日期.git仓库地址. 脚本统计的是git仓库内的所有分支的log信息. 脚本统计的是指定时间段内.每一个提交人指定的git地址的所有分支 ...
- 异常java.lang.NumberFormatException解决
原因一:超出了int类型的取值范围 项目中要把十六进制字符串转化为十进制, 用到了到了Integer.parseInt(str1.trim(), 16):这个是不是后抛出java.lang.Numbe ...