时间戳

首页 > 解决方案 > 如何更改下一页上的复选框颜色？

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

问题描述

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

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，但我在这样做时遇到了麻烦。

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

标签： cssag-grid

解决方案

我正在尝试跟踪和跟踪 .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

推荐阅读