去除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; }

  

posted on 2018-11-06 23:12  婧星  阅读(492)  评论(0编辑  收藏  举报

导航