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

how to adjust size of 'tick' inside checkbox? – Html

I have given an input element type checkbox, its fine but when its checked tick seems very big.

I need to make smaller that tick symbol

here is html content from browser:

<div class="defaultRoot">
  <div class="defaultBody ">
    <div class="checkboxWrapper">
      <input id="kis-9l7v7o3vr" type="checkbox" class="kischeckbox" style="width: 24px; height: 24px; accent-color: rgb(47, 55, 93); border: 4px solid gray; border-radius: 0px; display: block; transition: border-color 0ms ease 0s, background-color 0ms ease 0s; cursor: default;">
    </div>
    <div class="labelWrapper">
      <label class="label" data-disabled="false" for="kis-9l7v7o3vr">I agree to sell my privacy</label>
    </div>
  </div>
</div>

How can I make that tick smaller and thinner

Tags:

2

Answers


  1. 0

    Currently the browser does not (and will not) support virtual elements to the tick of the checkbox you have to customize them yourself. refer here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox

    Login or Signup to reply.
  2. 0

    using CSS you can adjust the size of the tick inside the checkbox as follow

    <!DOCTYPE html>
<html>
<head>
  <title>Adjust Checkbox Tick Size</title>
  <style>
    .checkboxWrapper, .labelWrapper {
      display: inline-block;
      vertical-align: middle;
    }

    input[type=checkbox].kischeckbox {
      display: inline-block;
      width: 14px;
      height: 14px;
      accent-color: rgb(47, 55, 93);
      border: 4px solid gray;
      border-radius: 0px;
      display: block;
      transition: border-color 0ms ease 0s;
      cursor: default;
      vertical-align: middle;
    }

    input[type=checkbox].kischeckbox:checked + label::before {
      content: "2714"; /* tick symbol */
      font-size: 16px; /* adjust the size of the tick here */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="defaultRoot">
    <div class="defaultBody ">
      <div class="checkboxWrapper">
        <input id="kis-9l7v7o3vr" type="checkbox" class="kischeckbox">
      </div>
      <div class="labelWrapper">
        <label class="label" data-disabled="false" for="kis-9l7v7o3vr">I agree to sell my privacy</label>
      </div>
    </div>
  </div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search