如何更改下一页上的复选框颜色？

Question

我正在尝试改编以下页面中的一些代码：

https://plnkr.co/edit/plSzOtlpPXFguBIY1JwB?p=preview

当我点击 'Column' 时，复选框是粉红色的。

样式好像控制如下：

<style> html, body { margin: 0; padding: 0; height: 100%; } </style>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"/>
    <script src="https://unpkg.com/ag-grid-enterprise@18.1.1/dist/ag-grid-enterprise.min.js"></script></head>
<body>

<div id="myGrid" style="height: 100%;" class="ag-theme-material"></div>

我正在尝试跟踪和追踪 .css 但我在这样做时遇到了问题。

例如，我如何将复选框更改为蓝色？

Answer 1

他们没有使用真正的复选框，请参阅 HTML 结构

<span class="ag-column-select-checkbox" role="presentation" ref="cbSelect">  

  <span class="ag-checkbox-checked" role="presentation">
    <span class="ag-icon ag-icon-checkbox-checked"></span>
  </span> 

  <span class="ag-checkbox-unchecked ag-hidden" role="presentation">
    <span class="ag-icon ag-icon-checkbox-unchecked"></span>
  </span>  

  <span class="ag-checkbox-indeterminate ag-hidden" role="presentation">
    <span class="ag-icon ag-icon-checkbox-indeterminate"></span>
  </span>  

  <span class="ag-checkbox-label" role="presentation"></span>

</span>

他们正在使用 span，当您检查这些元素的样式时，您可以看到他们将图像设置为背景 like this one，并用于 ag-icon-checkbox-checked 元素。

他们正在使用 javascript 来实现这一目标。

但在这里你可以看到一篇关于如何使用 css:

自定义复选框的文章和代码笔

希望对您有所帮助，

Answer 2

I'm trying to follow and trace the .css but I'm having trouble doing so.

How would I, for example, change the checkboxes to blue?

以下是使用 Chrome 的开发人员工具执行此操作的方法：

检查选中的复选框：<span class="ag-icon ag-icon-checkbox-checked"></span>

在样式面板中查找此 CSS：

.ag-theme-material .ag-icon-checkbox-checked:empty {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYgMEgyYTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxNGEyIDIgMCAwIDAgMi0yVjJhMiAyIDAgMCAwLTItMnpNNyAxNEwyIDlsMS40MS0xLjQxTDcgMTEuMTdsNy41OS03LjU5TDE2IDVsLTkgOXoiIGZpbGw9IiNGRjQwODEiLz48L3N2Zz4=);
}

右击带下划线的data:image...部分，点击"Open in new tab"。
在新选项卡中，右键单击 "View page source"。

这是您的 SVG（格式化）：

<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"> 
    <path
        d="M16 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM7 14L2 9l1.41-1.41L7 11.17l7.59-7.59L16 5l-9 9z"
        fill="#FF4081"
    />
</svg>

您需要将 fill 更改为所需的颜色。我去了 #1976D2 (blue[700]).
如果需要，您可以只保存 SVG 文件并在 CSS 中指向该文件。否则，以下是将其作为数据 URI 取回的方法。
将您的 SVG 放入某个随机网络工具中。这些天你不必特别为 SVG 使用 base64，但我不打算讨论那个。
我用过这个：https://dopiaza.org/tools/datauri/index.php

把输出放在原来的地方CSS:

.ag-theme-material .ag-icon-checkbox-checked:empty {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYgMEgyYTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxNGEyIDIgMCAwIDAgMi0yVjJhMiAyIDAgMCAwLTItMnpNNyAxNEwyIDlsMS40MS0xLjQxTDcgMTEuMTdsNy41OS03LjU5TDE2IDVsLTkgOXoiIGZpbGw9IiMxOTc2RDIiLz48L3N2Zz4=);
}

将这个新的 CSS 放在您的代码中的某处。它必须在原始 ag-grid CSS.
结尾：https://plnkr.co/edit/BuxqByk5Py0vW0qUfPbx?p=preview

如何更改下一页上的复选框颜色？

How do I change my checkbox colours on the following page?

css

ag-grid