CSS input 样式设置（自动填充样式等）

1、input type=”number” 去除右侧上下箭头

input[type=number] {  
    -moz-appearance:textfield;  
}  
input[type=number]::-webkit-inner-spin-button,  
input[type=number]::-webkit-outer-spin-button {  
    -webkit-appearance: none;  
    margin: 0;  
} 

2、input 自动填充样式更换

input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: #fff !important;
    color: fieldtext !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    box-shadow: 0 0 0 auto #fff;
    -webkit-text-fill-color: #333237;
    caret-color: #fff;
    -webkit-transition-delay: 111111s;
    -webkit-transition: color 11111s ease-out, background-color 111111s ease-out;
    font-size: rem(28);
}

input:-webkit-autofill::first-line {
    font-size: rem(28);
}

3、input提示placeholder样式更换

input {
    background: #f5f7fa;
    color: #333237;
    border: none;
}
input::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: #c6d2d9;
}
input::placeholder:after {
    color: red;
    content: "*";
}

4、input图标颜色更改、focus之后的外框样式

input::-webkit-calendar-picker-indicator {
     filter: invert(1); /*颜色反色*/
     transform: scale(1.2);
}
/*外框样式去除*/
input:focus-visible{
     outline: none;
}