有时候需要用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内容的大小的更多相关文章

  1. 去除IE10自带的清除按钮

    最近在工作中碰到了一个问题,原本在IE8,IE9下正常的input表单,在IE10下会出现清除按钮,即表单右侧会出现一个可以清除该表单内容的小叉.由于之前一直没有兼容过IE10,所以我专门搜了下原因. ...

  2. 去除input 在 webkit内核浏览器 选择历史时,有一个黄色背景

    input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; } http://www.imooc.com/arti ...

  3. 去除input标签点击时的默认样式

    去除input标签点击时的默认样式的方法 outline:none; //去除点击时的边框 border : none; //去除input框的边框

  4. 用css去除chrome、safari等webikt内核浏览器对控件默认样式

    有这么一个webkit的私有属性: -webkit-appearance:none; /*去除input默认样式*/ 添加该样式,并且值为'none'时即可取消浏览器对于控件的默认样式. 另外这个属性 ...

  5. jquery ui 常用(一)(自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| )

    条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...

  6. 改变按钮在iPhone下的默认风格

    -webkit-appearance: none; "来改变按钮在iPhone下的默认风格,其实我们可以反过来思路,使用"appearance"属性,来改变任何元素的浏览 ...

  7. WPF自定义控件之带倒计时的按钮--Button

    1.说明 之前做过一个小项目,点击按钮,按钮进入倒计时无效状态,计时完成后,恢复原样,现在就实现该效果---带倒计时的按钮 2.效果 1)正常状态               2)MouseOver( ...

  8. 【传】玩转Android---UI篇---ImageButton(带图标的按钮)

    原文网址:http://hualang.iteye.com/blog/964049 除了Android系统自带的Button按钮一万,还提供了带图标的按钮ImageButton 要制作带图标的按钮,首 ...

  9. 添加类似navigationController自带的返回按钮

    添加类似navigationController自带的返回按钮,效果如下: 一.UINavigationcontroller自带的navigationBar 是无法添加左箭头的返回按钮的 在网上搜索了 ...

随机推荐

  1. C#黎明前的黑暗

    学习编程已经很久了,然而技术还停留在远古时代,丝毫没有什么进步的痕迹,平常也就写一些小软件来处理工作上面遇到的一些很繁杂的问题,天生愚笨或许就是说的我. 黎明前的黑暗期,真的太长了,烂烂的文章就像烂烂 ...

  2. CentOS升级glibc-2.14

    升级glibc-2.14用到的rpm https://pan.baidu.com/s/1v-Uk579TGM6498cExst6ow 先要安装gcc yum -y install gcc 执行: rp ...

  3. IDEA上创建 Maven SpringBoot项目发布到Tomcat

    概述 上篇记录了IDEA上创建Maven SpringBoot+mybatisplus+thymeleaf 项目,但是如何将SpringBoot发布到Tomcat,直接采用Maven 命令Clear- ...

  4. Python_collections_namedtuple可命名元组

    namedtuple:用来构建带字段名的元组 import collections # 创建类,两种创建方法 MytupleClass = collections.namedtuple('Mytupl ...

  5. spark学习之路1--用IDEA编写第一个基于java的程序打包,放standalone集群,client和cluster模式上运行

    1,首先确保hadoop和spark已经运行.(如果是基于yarn,hdfs的需要启动hadoop,否则hadoop不需要启动). 2.打开idea,创建maven工程.编辑pom.xml文件.增加d ...

  6. 基于Kubernetes集群部署skyDNS服务

    目录贴:Kubernetes学习系列 在之前几篇文章的基础,(Centos7部署Kubernetes集群.基于kubernetes集群部署DashBoard.为Kubernetes集群部署本地镜像仓库 ...

  7. vue $mount 和 el的区别

    两者在使用效果上没有任何区别,都是为了将实例化后的vue挂载到指定的dom元素中. 如果在实例化vue的时候指定el,则该vue将会渲染在此el对应的dom中,反之,若没有指定el,则vue实例会处于 ...

  8. IDEA创建lo4j模板

    复制文字到文本框中: log4j.rootLogger=DEBUG,stdout log4j.logger.org.mybatis=DEBUG log4j.appender.stdout=org.ap ...

  9. POJ 3281 Dining (拆点)【最大流】

    <题目链接> 题目大意: 有N头牛,F种食物,D种饮料,每一头牛都有自己喜欢的食物和饮料,且每一种食物和饮料都只有一份,让你分配这些食物和饮料,问最多能使多少头牛同时获得自己喜欢的食物和饮 ...

  10. P3150 pb的游戏(1)

    P3150 pb的游戏(1)选偶数,这一轮一定会活,选奇数,自己这一轮可能会死,并且(如果自己这一轮没死)下一轮对手一定可以活,因为选了奇数,就会被分解成奇数和偶数. #include<iost ...