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

晨光熹微fd

于 2023-07-14 08:56:44 发布

阅读量1.4k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/yangyanqin2545/article/details/131715746

版权

文章介绍了在AntDesignofVue中如何修改input组件的默认样式，特别是处理浏览器的自动填充功能导致的样式冲突问题。通过使用特定的CSS选择器和延迟过渡效果，确保自定义样式生效。同时，文章还提到了输入框错误状态下的背景颜色设置以及调整input与边框的间距方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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与边框之间的距离