Member Avatar for dwlamb

Is there some standard trick to styling labels and checkboxes so they appear consistently in all browsers? The attatched pic with the label obscured by overlapping checkbox is what I get with Chrome and Safari for Windows. The other attatched pic is what I see in Firefox, IE and Opera.

This is the code for the HTML:

<div class="login-fields">
    <label for="remember" id="remember-lbl">Remember me</label>
    <input type="checkbox" alt="Remember me" value="yes" class="inputbox" name="remember" id="remember">
</div>

The only css is this:

.login-fields label, .contact-form label {
    float: left;
    width: 8em;
}
Login-Firefox.png 4.86 KB Login.png 16.68 KB
Edited by dwlamb because: Hit post too soon earlier
  • 3 Contributors
  • 4 Replies
  • 413 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #46692

Dani AI

Generated

Floating a label and relying on its width makes layout brittle across engines. Native form controls are "replaced" elements and different browsers/OS give them slightly different boxes, so a checkbox can sit where it shouldn't in WebKit on Windows even though it looks fine in Gecko/Trident. As noted, adding a left margin is a quick, practical fix; 's suggestion to use a CSS reset (or Normalize) is also helpful. For a more robust result, use one of these patterns.

Use flexbox to align label and control without floats:

.login-fields {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.login-fields label {
  min-width: 8ch; /* reserve space for the label text */
}
.login-fields input[type="checkbox"] {
  margin: 0;
}

Or keep simple HTML and wrap the input in the label so markup and flow are consistent (click area improves too):

<label class="checkbox">
  <input type="checkbox" name="remember" value="yes">
  Remember me
</label>

Quick troubleshooting tips: temporarily add visible borders (outline: 1px solid hotpink) to see each element's box, inspect the computed display, vertical-align, margin and line-height in DevTools, and test at 100% zoom and different fonts. Remember that inputs are inline-level (replaced) elements — setting them to inline-block or using flexbox makes alignment predictable.

If going custom (styling away the native box), proceed with caution: remove native appearance only after implementing a fully accessible replacement (keyboard focus, aria state, and screen-reader text). Flexbox or inline-block + vertical-align will give the simplest, most cross-browser-stable result.

Recommended Answers

All 4 Replies

Member Avatar for Violet_82

To start with, I'd say that rather than relying on the width of the label to position the input, you should remove that width:8em and give the input a margin-left. The input is a block element so you can safely have a margin applied to it. I am using linux at the moment so I can't test in IE, but try that
I should have said: add a class to the input so you can target it easily or do input[type=checkbox]{margin-left:20px;}

Edited by Violet_82 because: addition
Member Avatar for dwlamb

Thanks for the input. Giving the checkbox a left margin worked well.

Member Avatar for Violet_82

No worries, glad it worked.

Edited by Violet_82
Member Avatar for Member #46692

don't forget to use a css reset as well.

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.