13861900516 发表于 2024-7-1 17:17:02

EL-选择器通过CSS设置为为无边框

【8.0.104】EL-选择器在组件中使用js更改为无边框或透明
https://gcdn.grapecity.com.cn/showtopic-167771-1-1.html
(出处: 葡萄城开发者社区)


该贴中的CSS脚本可以使用,但针对正常的EL选择器,在点击的时候边框也没了,不晓得啥原因

Grayson.Shang 发表于 2024-7-2 10:07:54

大佬您好,这个是我测试的结果,不知道是否满足咱们的需求


CSS测试代码
.my_selector .el-select .el-input__wrapper,
.my_selector .el-select .el-input__wrapper.is-focus
{
    box-shadow: none !important;
}


13861900516 发表于 2024-7-2 13:46:30

Grayson.Shang 发表于 2024-7-2 10:07
大佬您好,这个是我测试的结果,不知道是否满足咱们的需求




第一个EL选择器为什么也没有边框了呢,我的意思是,设置了CSS类名的就没有边框了,而没有设置CSS类名的还保持原状

Nathan.guo 发表于 2024-7-2 18:31:06

13861900516 发表于 2024-7-2 13:46
第一个EL选择器为什么也没有边框了呢,我的意思是,设置了CSS类名的就没有边框了,而没有设置CSS类名的还 ...

大佬可以学习下css就明白啦~~

原因是,我们在编写CSS测试代码是,同时给多个类设置了样式(.my_selector .el-select .el-input__wrapper)

13861900516 发表于 2024-7-3 11:04:42

本帖最后由 13861900516 于 2024-7-3 11:05 编辑

Nathan.guo 发表于 2024-7-2 18:31
大佬可以学习下css就明白啦~~

原因是,我们在编写CSS测试代码是,同时给多个类设置了样式(.my_select ...
我是CSS小白一个啊,所以就提了个问题,为什么
.my_selector .el-select .el-input__wrapper,
.my_selector .el-select .el-input__wrapper.is-focus
{
    box-shadow: none !important;
}这段代码是针对全局所有的EL选择器都起作用了?

Erik.Xue 发表于 2024-7-3 17:52:05

是的,如果要给某一个EL选择器设置该效果,可以给对应的EL选择器设置一个类名:



对应css加上类型即可:


.my_selector .el-select .el-input__wrapper,
.my_selector .el-select .el-input__wrapper.is-focus .abc
{
    box-shadow: none !important;
}

13861900516 发表于 2024-7-3 17:59:10

Erik.Xue 发表于 2024-7-3 17:52
是的,如果要给某一个EL选择器设置该效果,可以给对应的EL选择器设置一个类名:




我的意思是为什么没在这设置的也出现没边框情况了,这是我发一个帖子的目的

Nathan.guo 发表于 2024-7-3 18:37:10

13861900516 发表于 2024-7-3 17:59
我的意思是为什么没在这设置的也出现没边框情况了,这是我发一个帖子的目的
我这边测试没有设置CSS类名的倒是不会透明


大佬可以检查下设置是否正确

13861900516 发表于 2024-7-3 19:05:35

Nathan.guo 发表于 2024-7-3 18:37
我这边测试没有设置CSS类名的倒是不会透明




你鼠标点下第一个就丢失了

Nathan.guo 发表于 2024-7-4 11:31:20

13861900516 发表于 2024-7-3 19:05
你鼠标点下第一个就丢失了

我这边测试,点击后并没有消失



页: [1] 2
查看完整版本: EL-选择器通过CSS设置为为无边框