Question

我正尝试从以下页面改编一些代码：

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

当我单击“列”时，复选框为粉红色。

样式似乎受到如下控制：

<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

我正在尝试跟踪和跟踪.css，但是我在执行时遇到了麻烦   这样。

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

以下是使用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...部分，然后单击“在新选项卡中打开”。
在新标签中，右键单击“查看页面源”。

这是您的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

Answer 2

他们没有使用真实的复选框，请参见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>

他们正在使用跨度，当您检查那些元素的样式时，您可以看到它们具有设置为背景like this one的图像，该图像被用作ag-icon-checkbox-checked元素。

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

但是在这里您可以看到有关如何使用css自定义复选框的文章和codepen：

希望有帮助，

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

2 个答案: