Search code examples
bootstrap-5

Bootstrap 5: Checkbox and radio button groups - enable hover effect

My problem is easily reproducible in bootstrap's documentation:
This is how it looks like when I hover over a regular button:
Button-Hover
And this when I hover over a "fake" button:
Fake-Button-Hover

Is there an easy way to make the hover behavior work on these "fake" buttons?

Here's some code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <!-- Example Code -->
    <p>How I imagined it:</p>
    <div class="btn-group" role="group" aria-label="Basic outlined example">
      <button type="button" class="btn btn-outline-primary">Left</button>
      <button type="button" class="btn btn-outline-primary">Middle</button>
      <button type="button" class="btn btn-outline-primary">Right</button>
    </div>
    <p>How it's going:</p>
    <div
      class="btn-group"
      role="group"
      aria-label="Basic checkbox toggle button group"
    >
      <input
        type="checkbox"
        class="btn-check"
        id="btncheck1"
        autocomplete="off"
      />
      <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

      <input
        type="checkbox"
        class="btn-check"
        id="btncheck2"
        autocomplete="off"
      />
      <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

      <input
        type="checkbox"
        class="btn-check"
        id="btncheck3"
        autocomplete="off"
      />
      <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
    </div>

    <!-- End Example Code -->
  </body>
</html>

Solution

  • From the inspect you will find that the top, left, right are made off with buttons. But the fake ones are made of with radio buttons. Their label actually taking the button sizes width. Below I have added custom class .check-label and added the hover css to it with custom color and with bang important. Its working now. The hover effect was there by default while the radio button is checked. That's why for it's hover was not working during unselect. There may have some other ways but I have tried by adding custom class. Hope this might help you.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <style>
       .check-label:hover {
            color: white !important;
            background-color: blue !important;
            border-color: black !important;
        }
    </style>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <!-- Example Code -->
    <p>How I imagined it:</p>
    <div class="btn-group" role="group" aria-label="Basic outlined example">
      <button type="button" class="btn btn-outline-primary">Left</button>
      <button type="button" class="btn btn-outline-primary">Middle</button>
      <button type="button" class="btn btn-outline-primary">Right</button>
    </div>
    <p>How it's going:</p>
    <div
      class="btn-group"
      role="group"
      aria-label="Basic checkbox toggle button group"
    >
      <input
        type="checkbox"
        class="btn-check"
        id="btncheck1"
        autocomplete="off"
      />
      <label class="btn btn-outline-primary check-label" for="btncheck1">Checkbox 1</label>

      <input
        type="checkbox"
        class="btn-check"
        id="btncheck2"
        autocomplete="off"
      />
      <label class="btn btn-outline-primary check-label" for="btncheck2">Checkbox 2</label>

      <input
        type="checkbox"
        class="btn-check"
        id="btncheck3"
        autocomplete="off"
      />
      <label class="btn btn-outline-primary check-label" for="btncheck3">Checkbox 3</label>
    </div>

    <!-- End Example Code -->
  </body>
</html>