Ant Design of Vue中修改a-input默认样式

Ant Design of Vue中修改a-input默认样式

浏览器对于input会有自动填充功能,给input添加默认样式,导致自定义样式不生效,书写以下样式进行延迟使自定义样式生效

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active
{ 
        -webkit-transition-delay: 99999s; 
        -webkit-transition: color 99999s ease-out, background-color 99999s ease-out; 
        transition-delay: 99999s; 
        transition: color 99999s ease-out, background-color 99999s ease-out;
}

修改默认样式

.has-error .ant-input-affix-wrapper .ant-input, .has-error .ant-input-affix-wrapper .ant-input:hover {
    background: #141C68;
  } // 错误时的背景颜色

  .has-error .ant-input, .has-error .ant-input:hover {
    background: #141C68;
  } // 错误时的背景颜色
  
  .ant-input-affix-wrapper .ant-input:not(:first-child) {
    padding-left: 46px;
  } // input与边框之间的距离

参考文档:https://blog.csdn.net/RepecTT/article/details/125784577#comments_27574635

你可能感兴趣的:(vue.js,javascript,前端)