去除input默认带的上下按钮与修改placeholder的默认颜色、背景、placeholder内容的大小
有时候需要用input元素中type属性值为number时,会出现默认的上下按钮,
去掉input默认的上下按钮:兼容性写法如下
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button{
-webkit-appearance:none !important;
}
//兼容火狐浏览器
input[type='number']{
-moz-appearance:textfield;
}
去掉前:

去掉后:

获取input的焦点:
获取input的焦点通过:
$(‘input[type="number"]’).focus();
进入页面光标闪动
修改placeholder内容的字体颜色、大小、背景:
input::-webkit-input-placeholder { /* WebKit browsers */
font-size: 20px;
color: red;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-size: 20px;
color: red;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
/* placeholder大小 */
font-size: 20px;
/* placeholder颜色 */
color: red; }
input:-ms-input-placeholder { /* Internet Explorer 10+ */ font-size: 20px; color: red; }
去除input默认带的上下按钮与修改placeholder的默认颜色、背景、placeholder内容的大小的更多相关文章
- 去除IE10自带的清除按钮
最近在工作中碰到了一个问题,原本在IE8,IE9下正常的input表单,在IE10下会出现清除按钮,即表单右侧会出现一个可以清除该表单内容的小叉.由于之前一直没有兼容过IE10,所以我专门搜了下原因. ...
- 去除input 在 webkit内核浏览器 选择历史时,有一个黄色背景
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; } http://www.imooc.com/arti ...
- 去除input标签点击时的默认样式
去除input标签点击时的默认样式的方法 outline:none; //去除点击时的边框 border : none; //去除input框的边框
- 用css去除chrome、safari等webikt内核浏览器对控件默认样式
有这么一个webkit的私有属性: -webkit-appearance:none; /*去除input默认样式*/ 添加该样式,并且值为'none'时即可取消浏览器对于控件的默认样式. 另外这个属性 ...
- jquery ui 常用(一)(自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| )
条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...
- 改变按钮在iPhone下的默认风格
-webkit-appearance: none; "来改变按钮在iPhone下的默认风格,其实我们可以反过来思路,使用"appearance"属性,来改变任何元素的浏览 ...
- WPF自定义控件之带倒计时的按钮--Button
1.说明 之前做过一个小项目,点击按钮,按钮进入倒计时无效状态,计时完成后,恢复原样,现在就实现该效果---带倒计时的按钮 2.效果 1)正常状态 2)MouseOver( ...
- 【传】玩转Android---UI篇---ImageButton(带图标的按钮)
原文网址:http://hualang.iteye.com/blog/964049 除了Android系统自带的Button按钮一万,还提供了带图标的按钮ImageButton 要制作带图标的按钮,首 ...
- 添加类似navigationController自带的返回按钮
添加类似navigationController自带的返回按钮,效果如下: 一.UINavigationcontroller自带的navigationBar 是无法添加左箭头的返回按钮的 在网上搜索了 ...
随机推荐
- javac选项以递归方式编译给定目录下的所有Java文件 - IT屋-程序员软件开发技术分享社区
http://www.it1352.com/539276.html #Linux $ find -name“* .java”> sources.txt $ javac @ sources.txt ...
- Windows系统下安装运行Kafka
一.安装JAVA JDK 1.下载安装包 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151. ...
- eclipse中文乱码修改新方法
方法背景:想看别人的JAVA项目,导入eclipse后出现中文乱码,在设置了所有的工作空间都为UTF-8以后都没有用,并且项目Resource选项没有GBK选项,或统一选择GBK后会使其他项目出现中文 ...
- ubuntu下的“用vim打开中文乱码,用cat打开正常显示”的解决方法
转载 系统环境:ubuntu10.04 vim gvim完全安装 问题:终端下vim中的汉字为乱码,网上搜索了一些解决方案.但是奇怪的是,这些方法都不能实现gvim的菜单和文中汉字,终端vim下的文中 ...
- echarts 模拟迁徙
echarts 3 的功能貌似加了不少额 官方demo:http://echarts.baidu.com/demo.html#geo-lines 地图是基于地理地图的 百度提供了一些地图:http:/ ...
- [转] 对Array.prototype.slice.call()方法的理解
在看别人代码时,发现有这么个写法:[].slice.call(arguments, 0),这到底是什么意思呢? 1.基础 1)slice() 方法可从已有的数组中返回选定的元素. start:必需.规 ...
- 【NPM】常见问题解决
问题列表 问题一:npm install 执行报错 npm ERR! Unexpected end of JSON input while parsing near '...ependencies&q ...
- net core体系-web应用程序-4net core2.0大白话带你入门-6asp.net core配置文件
asp.net core配置文件 读取配置文件 asp.net core使用appsettings.json代替传统.net framework的web.config中的<appSettin ...
- eclipse启动web应用 报错
错误:The origin server did not find a current representation for the target resource or is not willing ...
- 04. Pandas 3| 数值计算与统计、合并连接去重分组透视表文件读取
1.数值计算和统计基础 常用数学.统计方法 数值计算和统计基础 基本参数:axis.skipna df.mean(axis=1,skipna=False) -->> axis=1是按行来 ...