有时候需要用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. 安装淘宝npm(cnpm)

    https://www.cnblogs.com/yominhi/p/7039795.html http://npm.taobao.org/ 初始化一个 mpvue 项目 现代前端开发框架和环境都是需要 ...

  2. python--使用双向队列结构检查回文

    这个简单,队列可两边进两边出. # coding = utf-8 # 双向进出队列 class Deque: def __init__(self): self.items = [] def is_em ...

  3. 一键安装基于dns的高可用k8s集群(3节点,etcd https)

    在公司,使用dns切换,可能会比keepalived+haproxy,更精简的易维护. 毕竟,高可用只是偶尔切换,不是时时切换. 且dns解析在自己可控时,更不会影响k8s线上使用了. (部分代码,由 ...

  4. jquery自定义事件

    触发事件: $(document).trigger('REMOVE_WEBSITE_MSG'); 判断消息条数为0,触发这个

  5. 跳跃表Skip List的原理

    1.二分查找和AVL树查找 二分查找要求元素可以随机访问,所以决定了需要把元素存储在连续内存.这样查找确实很快,但是插入和删除元素的时候,为了保证元素的有序性,就需要大量的移动元素了.如果需要的是一个 ...

  6. HashMap、HashTable与ConcurrentHashMap区别

    线程不安全的HashMap 在多线程环境下,使用HashMap进行put操作会引起死循环,导致CPU利用率接近100%,所以在并发情况下不能使用HashMap.例如,执行如下代码会引起死循环. fin ...

  7. flink-SQL

    Table API和SQL捆绑在flink-table Maven工件中.必须将以下依赖项添加到你的项目才能使用Table API和SQL: <dependency> <groupI ...

  8. Kudu之Tablet的发现过程

    当创建Kudu客户端时,其会从主服务器上获取tablet位置信息,然后直接与服务于该tablet的服务器进行交谈.为了优化读取和写入路径,客户端将保留该信息的本地缓存,以防止他们在每个请求时需要查询主 ...

  9. nginx-fastcgi 反向代理

    Nginx处理php页面 用fpm-server  基于fastcgi模块实现 Ngx_http_proxy_module  只能反代后端http server的主机 Ngx_fastcgi_prox ...

  10. python简单名片管理系统