Applying style to checkbox field

[JAIN RAJESH]

Hello team,

I have replaced the default tick character on the checkbox field with a large circle by changing Blockly.FieldCheckbox.CHECK_CHAR = '\u2713' to Blockly.FieldCheckbox.CHECK_CHAR = '\uD83D\uDD34';

See attched image: Now I want to change the color of this CHECK_CHAR to Red. I read in one post that it can be done by applying CSS to the class 

blocklyCheckbox. I tried but could not succeed. Can anyone please help with example codes.

Thank you in advance.

Kumaar

[Neil Fraser]

Note that the element you are styling is SVG, not HTML.  So CSS properties like 'color' and such don't work.  Try this:

.blocklyCheckbox {fill: red !important}

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/463fa871-5f7f-459a-ab80-98125a441d24n%40googlegroups.com.

--

Neil Fraser
https://neil.fraser.name

[JAIN RAJESH]

Thank you Neil for your prompt response.

It worked:)

You are great!

Kumaar

[JAIN RAJESH]

Also, can I change the background color of the square containing the circle from blue to, say, white. I have attached the image with red circles.

[Neil Fraser]

Try:

.blocklyFieldRect {fill-opacity: 1}

But this targets all the light-coloured rectangles in Blockly, not just the checkboxes.

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/215c6875-1062-4cbc-84aa-ae27059cc144n%40googlegroups.com.

[JAIN RAJESH]

Thank you once again! This too worked. though I shall not apply this as it affects all other blocks too.

Kumaar