Html Question posted in
Some basic documentation can be found here.

Html – looking for an alternative way to make custom checkbox

i already have one, but was wondering if there’s an alternative way.
the point is to have a checkbox thats a circle (grey) and have a letter in the middle

.custom-size-checkbox {
  text-align         : center;
  width              : 50px;
  height             : 43px;
  }
.custom-size-checkbox-input {
  -webkit-appearance : none;
  -moz-appearance    : none;
  appearance         : none;
  margin             : 0;
  width              : 45px;
  height             : 45px;
  display            : inline-block;
  position           : relative;
  background-color   : Grey;
  /* outline         : 2px solid grey;*/
  border-radius      : 50%;
  cursor             : pointer;
  }
.custom-size-checkbox-input:checked {
  background-color: red;
  }
.custom-size-checkbox-label:checked {
  color      : white;
  }
.custom-size-checkbox-label {
  display    : block;
  margin-top : 8px;
  }
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="custom-size-checkbox position-relative">
  <input type="checkbox" id="customCheckbox" class="custom-size-checkbox-input" />
  <label for="customCheckbox" class="custom-size-checkbox-label m-0 position-absolute top-50 start-50 translate-middle">XXL</label>
</div>

I want to point out that the above css might have some stuff that isn’t used, bc its a tweaked version of a different checkbox i used

with this i do get the end-result albeit with messing around a bit height and position relative/absolute.
but wanted to know if there’s a better way,basically i would love it if i can make it just like a simple div rounded along with d-flexing so the letter is in the middle.

also i’m having issues getting the mouse-pointer to show up when hovering as it seems certain area’s are not recognized and when checked i can only get it to turn the background red, but not the text white.

p.s. using bootstrap 5

Tags:

2

Answers


  1. 0

    I think maybe you want to do something like this. Here I have done something that when you click the text color changes. i hope helpful this code:

    .custom-size-checkbox {
            text-align: center;
            width: 45px;
            height: 45px;
            position: relative;
        }

        .custom-size-checkbox-input {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            margin: 0;
            width: 45px;
            height: 45px;
            display: inline-block;
            position: relative;
            background-color: Grey;
            /* outline: 2px solid grey;*/
            border-radius: 50%;
            cursor: pointer;
        }

        .custom-size-checkbox-input:checked {
            background-color: red;
        }

        .custom-size-checkbox-input:checked+.custom-size-checkbox-label {
            color: #fff;
        }

        .custom-size-checkbox-label {
            position: absolute;
            margin: 0;
            color: #000;
            left: 0;
            text-align: center;
            width: 100%;
            line-height: 45px;
            cursor: pointer;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            font-size: 13px;
        }
    <div class="custom-size-checkbox position-relative">
        <input type="checkbox" id="customCheckbox" class="custom-size-checkbox-input" />
        <label for="customCheckbox" class="custom-size-checkbox-label m-0 position-absolute top-50 start-50 translate-middle">XXL</label>
    </div>
    Login or Signup to reply.
  2. 0

    Try below code.Is this what you are looking for?

    .custom-checkbox-label{
  width:50px;
  height:50px;
  border-radius:50%;
  overflow:hidden;
  background:grey;
  padding:5px;
  display:flex;
  justify-content:center;
  align-items:center;
  cursor:pointer;
}
.custom-size-checkbox{
  overflow:hidden;
  width:50px;
  height:50px;
}
.custom-size-checkbox-input{
  position:absolute;
  left:-100%;
}
.custom-size-checkbox-input:checked+label{
  color:white;
  background:red;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="custom-size-checkbox position-relative">
  <input type="checkbox" id="customCheckbox" class="custom-size-checkbox-input" />
  <label for="customCheckbox" class="custom-checkbox-label">XXL</label>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search