如何在下一页上更改复选框的颜色？ [英] How do I change my checkbox colours on the following page?
本文介绍了如何在下一页上更改复选框的颜色？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试从以下页面改编一些代码：
https://plnkr.co/edit/plSzOtlpPXFguBIY1JwB?p=preview
当我单击列时，
样式似乎如下控制：
< style> html，body {margin：0;填充：0;高度：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>< /头>
< body>
< div id = myGrid style = height：100％; class = ag-theme-material< / div>
我试图跟踪并跟踪.css，但是这样做很麻烦。 / p>
例如，如何将复选框更改为蓝色？
解决方案
< blockquote>
我正在尝试跟踪.css，但在执行
时遇到了麻烦。
例如，我将复选框更改为蓝色？
以下是使用Chrome开发人员工具执行此操作的方法：
- 检查已选中的复选框：
< span class = ag-icon ag-icon-checkbox-checked>< / span> ; -
在样式面板中查找此CSS：
.AG主题材料.AG图标-复选框核对：空{
背景图像：URL（数据：图像/ SVG + xml的; BASE64，PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYgMEgyYTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMm gxNGEyIDIgMCAwIDAgMi0yVjJhhAmiAyIDAgMCAwLTItMnpNNyAxNEwyIDlsMS40MS0xLjQxTDcgMTEuMTdsNy41OS03LjU5TDE2IDVsLTkgOXoiIGZpbGw9IiNGRjQwODEiZzL4
}
- 右键单击带下划线的
data：image。 。部分，单击在新选项卡中打开。 - 在新选项卡中，右键单击查看页面源代码。
-
这是您的SVG（格式化）：
< svg width = 18 height = 18 viewBox = 0 0 18 18 xmlns = http://www.w3.org/2000/svg>
<路径
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放入随机的网络工具中。如今，您不必特别将base64用于SVG，但我不会讲到这一点。
- 我使用了以下代码： https://dopiaza.org/tools/datauri/index.php
-
将输出放入原始CSS中：
.ag-theme-material .ag-icon-checkbox-checked：清空{
背景图像：URL（数据：图像/ SVG + xml的; BASE64，PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYgMEgyYTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxNGEyIDIgMCAwIDAgMi0yVjJhMiAyIDAgMCAwLTItMnpNNyAxNEwyIDlsMS40MS0xLjQxTDcgMTEuMTdsNy41OS03LjU5TDE2IDVsLTkgOXoiIGZpbGw9IiMxOTc2RDIiLz48L3N2Zz4 =）;
}
- 将此新CSS放在代码中。
- 结尾： https://plnkr.co/edit/BuxqByk5Py0vW0qUfPbx?p=preview
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?
解决方案
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
fillto 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
这篇关于如何在下一页上更改复选框的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
