100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > ant-design-vue修改input和checkbox的组件样式

ant-design-vue修改input和checkbox的组件样式

时间:2023-01-09 13:38:06

相关推荐

ant-design-vue修改input和checkbox的组件样式

vscode中安装这个插件,可以快捷输入ant design vue……

刚开始接触ant-design的时候改样式改到崩溃……无从下手

有的直接写行内样式就生效了有的在less文件内去掉style标签内的scoped属性的时候也可以直接修改,这样会影响到其他组件内的样式。 不太好这样以上都不行,就要定义在全局less中,然后去修改了。最佳方法,有的实在改不了,百度……

1.1 修改input输入框的背景色:

<a-input placeholder="请输入内容" allow-clear class="test"/>

检查元素,选中该标签直接可以先在styles中试着修改背景色,可以看到样式是否改变,改变就选中前面的类名.ant-input-affix-wrapper .ant-input

复制好类名后,新建一个global.less文件可以,然后在main.js中挂载下

import './global.less' // 在main.js中引入

global.less:

如果不添加类名test,这就是修改所有的input输入框的背景色了。so添加个类名只修改当前的组件。

.test.ant-input-affix-wrapper .ant-input {background: pink; }

1.2 修改checkbox样式。

修改checkbox默认样式原文链接,他写的很详细了

// 鼠标hover时候的颜色.ant-checkbox-wrapper:hover .ant-checkbox-inner,.ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner{border: 2px solid #1BBA79 !important;}// 设置默认的颜色.ant-checkbox{.ant-checkbox-inner{border: 2px solid #1BBA79;background-color: transparent;}} // 设置选中的颜色.ant-checkbox-checked .ant-checkbox-inner,.ant-checkbox-indeterminate .ant-checkbox-inner {background-color: #1BBA79;border: 2px solid #1BBA79;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。