去除input默认带的上下按钮与修改placeholder的默认颜色、背景、placeholder内容的大小

时间:2022-06-29 12:57:45

有时候需要用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默认带的上下按钮与修改placeholder的默认颜色、背景、placeholder内容的大小

去掉后:

去除input默认带的上下按钮与修改placeholder的默认颜色、背景、placeholder内容的大小

获取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; }