How to align checkboxes and their labels on cross-browsers using CSS ? Last Updated : 21 Dec, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report For aligning the checkboxes or radio buttons with their labels can be achieved in many ways. Some of the simplest methods to achieve this are described below with proper code and output in different browsers. Now styling can be done in various ways to align the checkboxes and their labels. For this article, we are using internal stylesheet which is done under the style tag. Method 1: By making the position of checkbox relative, set the vertical-align to the middle can align the checkboxes and their labels. Here, we have made the position of the checkbox relative to the label. So the checkboxes are aligned according to the label. Example: html <!DOCTYPE html> <html> <head> <title> Aligning Checkboxes consistently in cross browsers </title> <style> h1 { color: green; } input[type=checkbox] { vertical-align: middle; position: relative; bottom: 1px; } label { display: block; } </style> </head> <body> <h1>Geeksforgeeks</h1> <form> <label> <input type="checkbox"> A Computer Science Portal for Geeks </label> <label> <input type="checkbox"> Just an Edutech Company to educate </label> </form> </body> </html> Output: Mozilla Firefox: Google Chrome: Internet Explorer: Method 2: By using the flex display, as the display is set to flex and alignment is center so both the checkbox and label are aligned to the center of the cross-axis. Example: html <!DOCTYPE html> <html> <head> <title> Aligning Checkboxes consistently in cross browsers </title> <style> h1 { color: green; } label { display: flex; align-items: center; } input[type=checkbox]{ flex: none; } </style> </head> <body> <h1>Geeksforgeeks</h1> <form> <label> <input type="checkbox"> A Computer Science Portal for Geeks </label> <label> <input type="checkbox"> Just an Edutech Company to educate </label> </form> </body> </html> Output: Mozilla Firefox: Google Chrome: Internet Explorer: Method 3: By grouping the label and checkbox into the same block, we can align the checkbox and label consistently in cross-browsers. Example: html <!DOCTYPE html> <html> <head> <title> Aligning Checkboxes consistently in cross browsers </title> </head> <body> <h1 style="color: green;">Geeksforgeeks</h1> <form> <div> <label style="display: inline-block"> <input style="vertical-align: middle" type="checkbox" /> <span style="vertical-align: middle"> A Computer Science Portal for Geeks </span> </label> </div> <div> <label style="display: inline-block"> <input style="vertical-align: middle" type="checkbox" /> <span style="vertical-align: middle"> Just an Edutech Company to educate </span> </label> </div> </form> </body> </html> Output: Mozilla Firefox: Google Chrome: Internet Explorer: Comment More infoAdvertise with us Next Article How to Change the Checkbox Background Color in CSS? R rishabhjain21 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Change the Checked Mark Color of a Checkbox using CSS? Checkboxes are commonly used on websites to enable users to make selections, such as agreeing to terms and conditions or choosing preferences. A checkbox is a small square box in forms that users can click to select or deselect an option. By default, the checkmark inside the checkbox has a basic sty 5 min read How to Make a Toggle Button using Checkbox and CSS ? Toggle means switching actions from one state to another. In simple words, when we switch from one state to the other state and back again to the former state we say that we are toggling. In this article, we are using the checkbox and CSS to create a toggle button. In web development, we can use thi 3 min read How to style a checkbox using CSS ? Styling a checkbox using CSS involves customizing its appearance beyond the default browser styles. This can include changing the size, color, background, and border, and adding custom icons or animations. Techniques often involve hiding the default checkbox and styling a label or pseudo-elements fo 3 min read How to Change the Checkbox Background Color in CSS? Change the checkbox background color in CSS by hiding the default checkbox and using custom styles with the ::before and ::after pseudo-elements. This involves creating a custom checkbox that looks and works just like a regular checkbox but with your own design.Below are the approaches to change the 2 min read How to style label associated with selected radio input and checked checkboxes using CSS ? The HTML <input type=â€radioâ€> is used to define a Radio Button. Radio Buttons are used to let the user select exactly one option from a list of predefined options. Radio Button input controls are created by using the “input†element with a type attribute having value as “radioâ€.In this article 2 min read How to Create Style Labels using HTML and CSS ? Creating style labels using HTML and CSS involves designing form labels that enhance user interaction. By applying CSS properties like color, font, and spacing, you can improve the appearance of labels associated with input fields, making forms more visually appealing and user-friendly.Creating Styl 1 min read Like