文本框自动填充样式的变更

2022-07-04  本文已影响0人  我叫Aliya但是被占用了

谷歌浏览器的自动填充默认样式如下:

/* user agent stylesheet */
input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
    color: fieldtext !important;
}

变更方法:

/* 禁用background样式 */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-transition: background 50000s ease-in-out 0s;
    transition: background 50000s ease-in-out 0s;
}
.my-input {
    background: transparent;
    box-shadow: 0 0 0px 1000px red inset; /* 背景色 */ 
    -webkit-text-fill-color: #333;
    &:focus {
      box-shadow: 0 0 0px 1000px #fff inset;
    }
}
上一篇 下一篇

猜你喜欢

热点阅读