有时候需要用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. Hadoop ConnectTimeoutException

    晚上继续学习tfidf示例.在跑TwoJob的时候报如下错误,开始以为是node02的防火墙没关好,但看了一下防火墙确实是关了的. 2019-03-30 23:48:19,705 INFO retry ...

  2. WARN conf.FlumeConfiguration: Could not configure sink sink1 due to: No channel configured for sink: sink1 org.apache.flume.conf.ConfigurationException: No channel configured for sink: sink1

    1.错误如下所示,启动flume采集文件到hdfs案例的时候,出现如下所示的错误: 大概是说No channel configured for sink,所以应该是sink哪里配置出现了错误,百度了一 ...

  3. php函数xml转化数组

    /** * xml转数组 * @param $xml * @return array */ function xml_to_array( $xml ) { $reg = "/<(\\w ...

  4. WebAPI——自动生成帮助文档

    Web Api 自动生成帮助文档   新建Web Api项目之后,会在首页有API的导航菜单,点击即可看到API帮助文档,不过很遗憾,Description 是没有内容的. 怎么办呢? 第一步: 如果 ...

  5. 【Android】Android 代码判断是否获取ROOT权限(二)

    [Android]Android 代码判断是否获取ROOT权限 方法比较简单,直接粘贴代码 /** * 判断当前手机是否有ROOT权限 * @return */ public boolean isRo ...

  6. 详细的ifcfg-eth0配置详解

    通过查资料与工作中的进行一下总结: DEVICE="eth1"   网卡名称NM_CONTROLLED="yes" network mamager的参数 ,是否 ...

  7. 部署Tomcat及nginx负载均衡

    Web应用服务器的选择   (1)IBM的WebSphere及Oracle的WebLogic 性能高,但价格也高   (2)Tomcat 性价比高 Tomcat服务器是一个免费的开放源代码的Web应用 ...

  8. Android ADB命令教程二——ADB命令详解

    Android ADB命令教程二——ADB命令详解 转载▼ 原文链接:http://www.tbk.ren/article/249.html       我们使用 adb -h 来看看,adb命令里面 ...

  9. HDU 2586 How far away ?(经典)(RMQ + 在线ST+ Tarjan离线) 【LCA】

    <题目链接> 题目大意:给你一棵带有边权的树,然后进行q次查询,每次查询输出指定两个节点之间的距离. 解题分析:本题有多重解决方法,首先,可用最短路轻易求解.若只用LCA解决本题,也有三种 ...

  10. poj 3067 Japan 【树状数组】

    <题目链接> 题目大意: 有两个点集,这两个点集从上至下分别从1~n,1~m编号,现在给出n组数据,(x,y),表示左边点集编号为x的点与右边点集编号为y的点相连,现在要求计算这些线段的交 ...