有时候需要用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内容的字体颜色、大小、背景:

  1. input::-webkit-input-placeholder { /* WebKit browsers */
  2. font-size: 20px;
  3. color: red;
  4.  
  5. }
  6.  
  7. input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  8. font-size: 20px;
  9. color: red;
  10.  
  11. }
  12.  
  13. input::-moz-placeholder { /* Mozilla Firefox 19+ */
  1. /* placeholder大小 */
  1. font-size: 20px;
  1. /* placeholder颜色 */
  1. 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. Android自定义View+贝赛尔曲线

    Android -- 贝塞尔曲线公式的推导和简单使用https://www.cnblogs.com/wjtaigwh/p/6647114.html Android -- 贝塞尔使圆渐变为桃心http: ...

  2. [转] babel的使用

    一.配置文件.babelrc .babelrc 文件存放在项目的根目录下. { "presets": [], "plugins": [] } presets 字 ...

  3. [转] 使用babel-plugin-react-css-modules简化CSS Modules的使用

    在我们的产品中,均使用CSS Modules来作为样式解决方案,大致的代码是这样的: import React from 'react'; import styles from './table.cs ...

  4. OpenGL的gl.h出现一堆错误,如重定义什么的

    问题:生成时提示 gl.h中出现一堆错误,如 error C2144: 语法错误 : "void"的前面应有";" error C2182: "API ...

  5. python之requests urllib3 连接池

    0.目录 1.参考 2. pool_connections 默认值为10,一个站点主机host对应一个pool (4)分析 host A>>host B>>host A pag ...

  6. python编码,赋值和is的区别

    1. == 与 is 的区别 赋值 == 比较值是否相等,is 比较,比较的是内存地址. 小数据池的作用是节省内存空间 数字的范围:-5 到 256 共用一个数据池 字符串范围:1.不能有特殊字符.2 ...

  7. net core体系-web应用程序-4net core2.0大白话带你入门-10asp.net core session的使用

    asp.net core session的使用   Session介绍 本文假设读者已经了解Session的概念和作用,并且在传统的.net framework平台上使用过. Asp.net core ...

  8. log4j.xml 报告集成

    等级: trace< debug<info<warn<error<fatal trace 追踪 deug: eclipse, Log4j配置   [1]从零开始 a). ...

  9. Codeforces 452E Three strings 字符串 SAM

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF542E.html 题目传送门 - CF452E 题意 给定三个字符串 $s1,s2,s3$ ,对于所有 $L ...

  10. 分享一段奇葩的DBMS_JOB书写经历

    declare JOB_ILEARN_ONLINE number :=1; begin dbms_job.submit(JOB_ILEARN_ONLINE,'clear_product;',sysda ...