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

Updating default html checkbox styles?

I am facing a problem I am trying to figure out how can I update my html checkbox in such a ways that once it is checked instead of tick ✔️ inside I place a small white squared div with lesser dimensions as shown in the attached picture. when I un-check it just a normal black background checkbox with white-border.

enter image description here

I placed some efforts here

=> https://jsbin.com/xejupuziqi/edit?html,css,output,

but out of luck, unfortunately.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0 

    #myCheckbox {
      display: none;
    }
    
    #myCheckboxLabel {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 1px solid #000;
      cursor: pointer;
    }
    
    #myCheckbox:checked + #myCheckboxLabel {
      background-color: #fff;
    }
    
    #myCheckbox:checked + #myCheckboxLabel:before {
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      background-color: #000;
      margin: 4px;
    }
    <input type="checkbox" id="myCheckbox">
<label for="myCheckbox" id="myCheckboxLabel"></label>


  2. 0

    Upon some research into this, using the pure html ‘checkbox’ this is impossible due to CSS not giving enough flexibility into this specific area.
    However this would certainly be possible if you were to re-create the check box functionality by yourself, I’ll try and work on a little base for how this might look:

    <div class="checkbox"> <!-- Style this div to be a white square with a grey outline like the checkbox is normally -->
    <img class="check" src=" image source here ">
</div>

    Then if you need to check if the div is checked or not then you can just test if the checkbox has an img source as a child or not.

    Login or Signup to reply.
  3. 0

    This should work if your only goal is to have a white box inside, This works by using both a border and an outline

    body {
  background-color: black;
}

input {
  appearance: none;
  height: 25px;
  width: 25px;
  background-color: black;
  outline: solid 2px white;
}

input:checked {
  border: solid 4px black;
  background-color: white;
}
    <input type="checkbox">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search