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

时间:2018-09-02 00:43:00

标签: css ag-grid

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

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,但是这样做很麻烦。

例如,如何将复选框更改为蓝色?

2 个答案:

答案 0 :(得分:2)

  

我正在尝试跟踪和跟踪.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更改为所需的颜色。我去过#1976D2blue[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

答案 1 :(得分: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>

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

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

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

希望有帮助,