Question

Little black boxes appearing in a popup

0

These little black boxes (highlighted with red) are now appearing on popup pages where a radio button has been placed. I am rendering apps in MS Edge but a colleague is also seeing it and he is rendering to Chrome. What are the reasons for this and does anyone have a solution?

asked 2022-07-12

Trent Lemkus

4 answers

Ragul raj · Answer 1 · 2022-07-13

Hi Trent,

Inspect on the browser and check if any css are applied on the popup if yes remove that.

Thangaselvan Sridharan · Answer 2 · 2022-07-22

Hi,

Surely some additional styles might added in input [type=checkbox]::after or input [type=checkbox]::before class. Remove the code from the class and run the application.

Hope this helps you, Thanks!

Tim v Steenbergen · Answer 3 · 2022-07-12

Sure. Something is bound to have gone wrong in the styling. Just right-click it, select ‘inspect’, and find the class that is creating this black box.

If it is not obvious to what dom-element these boxes belong, just start deleting elements in the inspector, until it disappears.

Another angle can be to find out which commit started showing these boxes.

Anyway, it will keep you busy for a while. Enjoy!

Daniel Thomas · Answer 4 · 2022-07-21

It’s an outline issue (if you’re seeing this with the default checkbox). If you’re comfortable creating a class, you can include outline: none; in your styling. This will remove the random checkbox. Below is a class I created based off of the original check-box class as reference.

This issue is fairly new and it has to do with the styling inside of the checkbox. Adding outline: none; removes that inner focus for lack of a better term.