Member Avatar for rohitrao

Hi... in the HTML checkbox, some part of space is taken by default from all the sides... i want to remove the space from the left... how do i do it...

Thankyou
Rohit

  • 3 Contributors
  • 3 Replies
  • 87 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Native checkboxes are rendered by the browser/OS and can carry built‑in spacing that simple margin tweaks won't always remove. ' idea to reset margins makes sense, and is right that some browsers limit which styles apply. The left gap can also come from the surrounding markup (a label, an li bullet, or inline whitespace), so first check the computed styles in DevTools to see which element actually has the space.

A robust approach is to keep the semantic checkbox for accessibility but render the visible box yourself. Wrap the input in a label and use a sibling element (or a pseudo‑element) for the visible box. The native checkbox is visually hidden but still focusable and operable; spacing is then entirely under your control.

HTML example:

<label class="checkbox">
  <input type="checkbox" id="opt" />
  <span>Option text</span>
</label>

CSS example:

.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox span::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 1px solid #666;
  vertical-align: middle;
}
.checkbox input:checked + span::before { background: #222; }

If you prefer styling the native box, appearance: none (and vendor prefixes) can help but varies by browser. For implementation details and cross‑browser techniques see CSS-Tricks: Custom Checkboxes and Radio Buttons and MDN on appearance. Common troubleshooting: inspect parent margins, try display:inline-block or adjust line-height/vertical-align, and test in all target browsers.

Recommended Answers

All 3 Replies

Member Avatar for rudevils

hi there
for removing the space, u can make custom style like this

.checkboxstyle {
     margin-left: 0;
     padding-left: 0;
  }

hope it helps

Member Avatar for rohitrao

hi there
for removing the space, u can make custom style like this

.checkboxstyle {
     margin-left: 0;
     padding-left: 0;
  }

hope it helps

Nope.. it did not.... anything else..?

Member Avatar for MidiMagic

Some browsers do not allow certain styles on form items.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.