当前位置: 首页 > 知识库问答 >
问题:

前端 - part选择器不支持与:checked连用?

沈子实
2024-05-23

如下,使用part选择器穿透web component,其他样式均生效,但是与:checked选择器配合却不生效,是part选择器不支持和:checked连用,还是写错了?

::part(t-checkbox) {    -webkit-appearance: none;    width: 16px;    height: 16px;    display: inline-flex;    outline: none;    color: var(--blue);    background-color: var(--blue);}::part(t-checkbox):checked {    color: var(--blue, #2a80eb);    background-color: var(--blue, #2a80eb);}

web component中使用

<input type="checkbox" part="t-checkbox" />

共有1个答案

杜炫明
2024-05-23
::part(t-checkbox):checked {    color: var(--blue, #2a80eb);    background-color: var(--blue, #2a80eb);    appearance: none;}

添加 appearance: none; 就会发现起作用了。不是 part选择器和 :checked 连用不起作用,而是设置的样式对 input 组件没有效果。

 类似资料:
  • 什么时候需要将vue2升级到vue3? 面试被问到什么场景需要使用vue3,应该如何回答

  • 我刚开始使用Vaadin Designer,主题选择器没有显示我的自定义主题。当我运行应用程序时,主题更改被应用并且工作良好,但是我不能在Vaadin Designer中立即看到它们。 有人知道这些主题的来源吗?

  • 问题内容: 我正在使用Macbook 当连接localhost db(在Mac上为PostgreSQL)时,Psycopg2可以很好地工作。当我尝试在Windows10上连接PostgreSQL数据库时,引发了错误。 以下代码是我用于连接的内容,主机只是Windows10的IP 错误: 这是因为系统兼容性还是其他原因?我尝试了其他Windows机器,但没有运气使其工作。但是,当我使用Node.JS

  • 连连支付 0314 自我介绍,平时是怎么学前端,为什么选前端作为求职目标,为什么不学本科的方向 如何实现进度条 slider flex属性怎么简单实现居中 如果一行有三个div,位置放不下,flex下的属性该如何设置 基本属性和引用类型如何在复制引用类型中,一个修改,另一个修改 答:加判定;扔出异常;正解 有个第三方库有提供API实现 深拷贝的过程,如果对象里有引用自己的对象要如何处理,不能一直递

  • 问题内容: 如果我只需要2/3列,而是查询而不是在select查询中提供这些列,那么关于更多/更少I / O或内存的性能是否会有所下降? 如果我确实选择了*,则可能会出现网络开销。 但是在选择操作中,数据库引擎是否总是从磁盘中提取原子元组,还是仅提取在选择操作中请求的那些列? 如果它总是拉一个元组,则I / O开销是相同的。 同时,如果它拉出一个元组,从元组中剥离请求的列可能会占用内存。 因此,在

  • 显示错误根据标签文件中的TLD或属性指令,属性选择不接受任何表达式 其中,foo是在url中传递的参数,类似于