如何自定义处于不确定状态的复选框的样式?

洋葱

所以我想定制我的复选框,这样它看起来像这种不确定的状态。选中和未选中的工作正常,但是我无法正确显示不确定的对象。任何帮助将不胜感激!
我已经尝试过了tag.class:indeterminate {}input[type=checkbox]:indeterminate {}但在样式表中似乎没有用。

我的代码和CSS示例:链接

q

您应该状态::before::after伪元素进行类似的处理:indeterminate,就像处理:checked状态一样。

从CSS删除此部分:

input[type=checkbox]:indeterminate {
    content: "";
    display: block;
    color: white;
    width: 17px;
    height: 17px;
    background-color:#3B99FC;
}

将它们添加到CSS:

input[type=checkbox]:indeterminate::before {
    content: "";
    display: block;
    color: white;
    width: 17px;
    height: 17px;
    background-color:#3B99FC;
}
input[type=checkbox]:indeterminate::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border: solid white;
    border-width: 2px 0 0 0;
    position: absolute;
    top: 9px;
    left: 5px;
}

您可以调整不确定状态减号内部符号的大小/位置input[type=checkbox]:indeterminate::after

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

对话框中的自定义复选框样式

来自分类Dev

如何将TreeView控件上的复选框更改为“不确定”状态?

来自分类Dev

如何保持ExpandableListView复选框处于选中状态?

来自分类Dev

Inno Setup在下次安装时记住“自定义”复选框状态

来自分类Dev

如何在自定义复选框视图中保留支持库复选框的样式?

来自分类Dev

使用KnockoutJS的“自定义样式”复选框不响应“检查”数据绑定

来自分类Dev

自定义Android复选框

来自分类Dev

自定义复选框样式-标签在选中/取消选中时跳转

来自分类Dev

使用Switchery设置样式的自定义复选框输入组件

来自分类Dev

样式不适用于自定义复选框和单选按钮

来自分类Dev

保持复选框处于倾斜状态

来自分类Dev

如何从WooCommerce结帐保存自定义复选框字段状态?

来自分类Dev

在WooCommerce Thankyou页面上显示自定义复选框字段状态

来自分类Dev

自定义复选框问题

来自分类Dev

带有javascript的Xforms-确定复选框处于选中状态还是未选中状态

来自分类Dev

对话框中的自定义复选框样式

来自分类Dev

正确确定自定义绘图的复选框状态

来自分类Dev

如何为复选框图像创建自定义WPF XAML样式

来自分类Dev

jQuery如何使复选框始终处于选中状态

来自分类Dev

为什么将具有不确定状态的复选框更改为未选中状态?

来自分类Dev

如何使复选框处于禁用状态?

来自分类Dev

如何禁用自定义复选框的单击事件

来自分类Dev

CSS如何设置自定义复选框刻度符号的“内容” /“背景”属性的样式?

来自分类Dev

复选框未处于“选中”状态

来自分类Dev

样式不适用于自定义复选框和单选按钮

来自分类Dev

从复选框Winforms检索不确定状态

来自分类Dev

自定义复选框:如何检查复选框是否被选中

来自分类Dev

定义自定义复选框样式

来自分类Dev

存储不确定的复选框状态

Related 相关文章

  1. 1

    对话框中的自定义复选框样式

  2. 2

    如何将TreeView控件上的复选框更改为“不确定”状态?

  3. 3

    如何保持ExpandableListView复选框处于选中状态?

  4. 4

    Inno Setup在下次安装时记住“自定义”复选框状态

  5. 5

    如何在自定义复选框视图中保留支持库复选框的样式?

  6. 6

    使用KnockoutJS的“自定义样式”复选框不响应“检查”数据绑定

  7. 7

    自定义Android复选框

  8. 8

    自定义复选框样式-标签在选中/取消选中时跳转

  9. 9

    使用Switchery设置样式的自定义复选框输入组件

  10. 10

    样式不适用于自定义复选框和单选按钮

  11. 11

    保持复选框处于倾斜状态

  12. 12

    如何从WooCommerce结帐保存自定义复选框字段状态?

  13. 13

    在WooCommerce Thankyou页面上显示自定义复选框字段状态

  14. 14

    自定义复选框问题

  15. 15

    带有javascript的Xforms-确定复选框处于选中状态还是未选中状态

  16. 16

    对话框中的自定义复选框样式

  17. 17

    正确确定自定义绘图的复选框状态

  18. 18

    如何为复选框图像创建自定义WPF XAML样式

  19. 19

    jQuery如何使复选框始终处于选中状态

  20. 20

    为什么将具有不确定状态的复选框更改为未选中状态?

  21. 21

    如何使复选框处于禁用状态?

  22. 22

    如何禁用自定义复选框的单击事件

  23. 23

    CSS如何设置自定义复选框刻度符号的“内容” /“背景”属性的样式?

  24. 24

    复选框未处于“选中”状态

  25. 25

    样式不适用于自定义复选框和单选按钮

  26. 26

    从复选框Winforms检索不确定状态

  27. 27

    自定义复选框:如何检查复选框是否被选中

  28. 28

    定义自定义复选框样式

  29. 29

    存储不确定的复选框状态

热门标签

归档