Skip to content
Fix Code Error

How to align checkboxes and their labels consistently cross-browsers

March 13, 2021 by Code Error
Posted By: One Crayon

This is one of the minor CSS problems that plagues me constantly. How do folks around Stack Overflow vertically align checkboxes and their labels consistently cross-browser? Whenever I align them correctly in Safari (usually using vertical-align: baseline on the input), they’re completely off in Firefox and IE. Fix it in Firefox, and Safari and IE are inevitably messed up. I waste time on this every time I code a form.

Here’s the standard code that I work with:

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

I usually use Eric Meyer’s reset, so form elements are relatively clean of overrides. Looking forward to any tips or tricks that you have to offer!

Solution

Warning! This answer is too old and doesn’t work on modern browsers.


I’m not the poster of this answer, but at the time of writing this, this is the most voted answer by far in both positive and negative votes (+1035 -17), and it’s still marked as accepted answer (probably because the original poster of the question is the one who wrote this answer).

As already noted many times in the comments, this answer does not work on most browsers anymore (and seems to be failing to do that since 2013).


After over an hour of tweaking, testing, and trying different styles of markup, I think I may have a decent solution. The requirements for this particular project were:

  1. Inputs must be on their own line.
  2. Checkbox inputs need to align vertically with the label text similarly (if not identically) across all browsers.
  3. If the label text wraps, it needs to be indented (so no wrapping down underneath the checkbox).

Before I get into any explanation, I’ll just give you the code:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Here is the working example in JSFiddle.

This code assumes that you’re using a reset like Eric Meyer’s that doesn’t override form input margins and padding (hence putting margin and padding resets in the input CSS). Obviously in a live environment you’ll probably be nesting/overriding stuff to support other input elements, but I wanted to keep things simple.

Things to note:

  • The *overflow declaration is an inline IE hack (the star-property hack). Both IE 6 and 7 will notice it, but Safari and Firefox will properly ignore it. I think it might be valid CSS, but you’re still better off with conditional comments; just used it for simplicity.
  • As best I can tell, the only vertical-align statement that was consistent across browsers was vertical-align: bottom. Setting this and then relatively positioning upwards behaved almost identically in Safari, Firefox and IE with only a pixel or two of discrepancy.
  • The major problem in working with alignment is that IE sticks a bunch of mysterious space around input elements. It isn’t padding or margin, and it’s damned persistent. Setting a width and height on the checkbox and then overflow: hidden for some reason cuts off the extra space and allows IE’s positioning to act very similarly to Safari and Firefox.
  • Depending on your text sizing, you’ll no doubt need to adjust the relative positioning, width, height, and so forth to get things looking right.

Hope this helps someone else! I haven’t tried this specific technique on any projects other than the one I was working on this morning, so definitely pipe up if you find something that works more consistently.


Warning! This answer is too old and doesn’t work on modern browsers.

Answered By: One Crayon

Related Articles

  • Is CSS Turing complete?
  • insert tables in dataframe with years from 2000 to…
  • Customize Bootstrap checkboxes
  • Active tab issue on page load HTML
  • Pandas pivot_table: filter on aggregate function
  • How to vertically center a container in Bootstrap?
  • Why is this inline-block element pushed downward?
  • Is it possible to apply CSS to half of a character?
  • Polymer project, that builds and runs fine locally,…
  • SQL find sum of entries by date including previous date
  • In CSS Flexbox, why are there no "justify-items" and…
  • Vuex dynamic checkboxes binding
  • Vertical Align Center in Bootstrap 4
  • Use of Jquery on scroll event
  • List of Timezone IDs for use with FindTimeZoneById() in C#?
  • Paper checkbox and -webkit-column-count
  • Checkbox Check Event Listener
  • How to change the background color on a input…
  • Centering in CSS Grid
  • Ukkonen's suffix tree algorithm in plain English
  • How to use html template with vue.js
  • Does moment.js allow me to derive a timezone…
  • How do SO_REUSEADDR and SO_REUSEPORT differ?
  • I need to sum values with specific condition
  • Obtain most recent value for based on index in a…
  • Add calculated column to df2 for every row entry in…
  • How does PHP 'foreach' actually work?
  • In plain English, what does "git reset" do?
  • Javascript validate all checkboxes are selected
  • Dynamically update values of a chartjs chart
  • Polymer 1.0 Dom-repeat with paper-checkbox: uncheck…
  • Cannot make table responsive
  • What are the undocumented features and limitations…
  • How to center an element horizontally and vertically
  • How do I limit the number of digits from 6 to 4 in…
  • Why do boxes become checked and then unchecked after…
  • Chrome / Safari not filling 100% height of flex parent
  • Adobe XD to responsive html
  • Vertically align an image inside a div with…
  • Triggering text area by clicking related select/checkbox
  • Filter array of objects through checkboxes
  • HTML table with 100% width, with vertical scroll…
  • For-each over an array in JavaScript
  • Trying to keep dropdown menus flush to the edge of…
  • Polymer 1.x: How to data bind to a variable boolean…
  • The definitive guide to form-based website authentication
  • What is your most productive shortcut with Vim?
  • What methods of ‘clearfix’ can I use?
  • How to filter a RecyclerView with a SearchView
  • How to use 2 columns as "key" to get MAX value of…
  • Why doesn't the height of a container element…
  • How can I require at least one checkbox be checked…
  • Reset/remove CSS styles for element only
  • Fix top buttons on scroll of list below
  • Pandas / Python - Compare numerically each row with…
  • What's the difference between eval, exec, and compile?
  • Get whole selected Column value in the HTML table
  • Reference - What does this regex mean?
  • How to style a checkbox using CSS
  • SQL query return data from multiple tables
  • How do I rotate text in css?
  • Why does C++ code for testing the Collatz conjecture…
  • How to apply rolling t.test with pandas?
  • Usage of __slots__?
  • XMLHttpRequest cannot load ✘✘✘ No…
  • Moving average in MYSQL without dates but grouped by…
  • How would I be able to multiple select and pass data…
  • Is it possible to get a module from a baseline…
  • How to retrieve HTML check-boxes' state from a local…
  • How do I insert multiple checkbox values into a table?
  • data.table vs dplyr: can one do something well the…
  • What is a NullReferenceException, and how do I fix it?
  • Simple way to transpose columns and rows in SQL?
  • Java generic type inheritance, List element type inference
  • How to select all checkboxes with jQuery?
  • Oracle sql query to group two sets of dates if sequencials
  • commandButton/commandLink/ajax action/listener…
  • What's the difference between Instant and LocalDateTime?
  • How to vertically align an image inside a div
  • ExpressJS How to structure an application?
  • detect dynamically checkboxes/polymer elements…
  • How can I manually compile a svelte component down…
  • Python Monthly Change Calculation (Pandas)
  • Make Iframe to fit 100% of container's remaining height
  • Show/hide 'div' using JavaScript
  • Check/Uncheck all the checkboxes in a table
  • jQuery Mobile: document ready vs. page events
  • Logging best practices
  • After a little scroll, the sticky navbar just is not…
  • Best way to extract messy HTML tables using BeautifulSoup
  • What's the proper value for a checked attribute of…
  • What's the best way of scraping data from a website?
  • *SOLVED* Component with multiple checkboxes and ONE v-model
  • How do I vertically center text with CSS?
  • Python - Modifying rows of a data frame where the…
  • Nesting query results in BigQuery
  • Why the value of input file missing when I input the…
  • How to center a checkbox in a table cell?
  • Iterator invalidation rules
  • How to use Servlets and Ajax?

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

What could cause java.lang.reflect.InvocationTargetException?

Next Post:

Oracle SQL: Update a table with data from another table

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error