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 默认值,标准粗细 ...
随机推荐
- selenium在scrapy中的使用、UA池、IP池的构建
selenium在scrapy中的使用流程 重写爬虫文件的构造方法__init__,在该方法中使用selenium实例化一个浏览器对象(因为浏览器对象只需要被实例化一次). 重写爬虫文件的closed ...
- python学习(十一)
- activiti-explore(activiti5.17) 替换数据库
http://blog.csdn.net/xiangwangye66/article/details/46943301
- PAT 1144 The Missing Number
1144 The Missing Number (20 分) Given N integers, you are supposed to find the smallest positive in ...
- day1扩展作业
作业一:博客作业二:编写登陆接口,●输入用户名密码(有文件存储用户名,命名)●认证成功后显示欢迎信息●输错三次后锁定(再次运行程序,还是输入上次输入的就显示已被锁定)作业三:多级菜单●三级菜单 ●可依 ...
- LaLeX数学公式
启用数学公式: 需要插入公式时,用 $ 将公式包围.若需要输入多行,则用一对 $$ 包围. 例如: $$ \rho = \sqrt{(\Delta x)^{2}+(\Delta y)^{2}} \\ ...
- prefixspan是挖掘频繁子序列,子序列不一定是连续的,当心!!!
序列模式挖掘是从序列数据库中发现频繁子序列作为模式. 子序列与频繁序列 了解了序列数据的概念,我们再来看看上面是子序列.子序列和我们数学上的子集的概念很类似,也就是说,如果某个序列A所有的项集在序列B ...
- Python3将xml文件解析为Python对象
一.说明 从最开始写javascript开始,我就很烦感使用getElementById()等函数来获取节点的方法,获取了一个节点要访问其子孙节点要么child半天要么就再来一个getElementB ...
- Oracle Database 11g安装及报错处理(win7)
稍后会将安装过程上传.Oracle数据库安装先决条件检查失败解决方案: 1,检查失败信息中,预期值:N/A 实际值:N/A ,并未出现具体的值 查看 “详细信息” . 引起失败的原因是:无法在指 ...
- Java中的异常处理与抛出
一.异常处理 程序运行过程中出现的,导致程序无法继续运行的错误叫做异常. Java中有多种异常,所有异常的父类是Throwable,他主要有两个子类Error和Exception. Error一般是J ...