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

问题

I'm trying to adapt some code from the following page:

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

When I click 'Column', the checkboxes are pink.

The style seems controlled as follows:

<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>

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?

回答1:

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?

Here's how to do this using Chrome's Developer Tools:

Inspect a checked checkbox: <span class="ag-icon ag-icon-checkbox-checked"></span>

Look for this CSS in the styles panel:

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

Right-click the underlined data:image... part, click "Open in new tab".
In the new tab, right-click "View page source".

Here's your SVG (formatted):

<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>

You need to change the fill to the desired colour. I went for #1976D2 (blue[700]).
You can just save the SVG file and point to that in the CSS if you want to. Otherwise, here's how to get it back as a data URI.
Put your SVG into some random web tool. You don't particularly have to use base64 these days for SVG, but I'm not going to get in to that.
I used this one: https://dopiaza.org/tools/datauri/index.php

Put the output in the original CSS:

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

Put this new CSS somewhere in your code. It must be after the original ag-grid CSS.
The end: https://plnkr.co/edit/BuxqByk5Py0vW0qUfPbx?p=preview

回答2:

They are not using real checkboxes, see the HTML structure

<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>

they're using spans, when you check those elements styling you can see they have images set up as background like this one that its being used for the ag-icon-checkbox-checked element.

They're using javascript to achieve this.

But here you can see an article and a codepen on how to customize checkboxes with css:

w3schools - How TO - Custom Checkbox
CodePen - Custom checkboxes CSS only

Hope it helps,

来源：https://stackoverflow.com/questions/52133176/how-do-i-change-my-checkbox-colours-on-the-following-page

标签

css

ag-grid