0

Starting with this answer, I'm trying to avoid the hover effect on a Bootstrap checkbox that appears like a button:

<input type="checkbox" class="btn-check" id="btn-enable-cromo" autocomplete="off" checked>
<label class="btn btn-outline-success btn-sq-responsive" for="btn-enable-cromo"><img src="images/Cromo.svg" /></label>

in CSS:

.btn-check:hover,
.btn-sq-responsive:hover {
    color: transparent;
}

I need this because on both desktop or mobile environment, when you click (or tap) on the checkbox you don't see anything until you click (or tap) elsewhere. The hover color is identical to the checked one so you have no feedback about.

Instead my goal is to show the actual state of the checkbox immediately.

The code above changes nothing: the behavior is the same. I'm using the Bootstrap v5.1.3.

Mark
  • 4,338
  • 7
  • 58
  • 120
  • Do you mean this? `color: transparent !important;` – masterguru Dec 18 '21 at 15:21
  • @masterguru it makes no difference. I see with the debugger that the `transparent` color is applied to the `:hover` properties of both classes but still if I move the mouse on the button it changes its color to green (`success`) – Mark Dec 18 '21 at 15:25
  • Do you mean this? Check this [link](https://jsfiddle.net/adwve4rL/) Related to background-color too? – masterguru Dec 18 '21 at 15:34
  • @masterguru your solution works only when the checkbox is unchecked. But when it's checked, hovering the mouse leads to the background change to white... it has just inverted the behavior! – Mark Dec 18 '21 at 16:11
  • It is a bit confusing, and I think it is because the `transparent` color... try to replace it for other, because you are using outlined classes and `transparent` looks like same as the background of them. Try using `red` or `gray` color to be sure when you are hover or not the checkbox button. – masterguru Dec 18 '21 at 16:34

1 Answers1

0

You would need to "create" a customized checkbox. There is a little article I found that actually shows you how and it has a copy-paste example which you can tweak to your needings.

Article on how to change the 'standard' checkbox styles.

The issue seems to be that browsers have their own default stylings baked into the browser. Think of the scrollbar and some form elements (dropdown, select, checkboxes and radio buttons etc.).

EDIT: There is waaay more usefull information including explanations on this stackoverflow page: How to style a checkbox using CSS

Zoe
  • 27,060
  • 21
  • 118
  • 148
Daly
  • 134
  • 5
  • 1
    Please note that newbedev is a Stack Overflow scraper; don't link to it. Instead, google the text or title (optionally with `site:stackoverflow.com`) and find the correct on-site link, instead of giving scrapers more traffic that they don't deserve. The newbedev page in this case appears to plagiarize two different SO pages, but I'm struggling to find the second one. Scrapers completely dominate that particular search. – Zoe Dec 26 '21 at 15:57