Title: Styling Checkboxes
Last modified: August 21, 2016

---

# Styling Checkboxes

 *  Resolved [Jeff](https://wordpress.org/support/users/photoreview/)
 * (@photoreview)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/styling-checkboxes/)
 * Hi!
 * First, thank you for this great plugin!
 * I’ve just installed it on my WP [website](http://www.photoreview.fr) and everything
   works well except I have trouble to customize the checkboxes with CSS.
 * By default, checkboxes are displayed line by line. How can I display them inline,
   on two or three lines.
 * So, this is what I have now: [http://cl.ly/image/233b230D0o08](http://cl.ly/image/233b230D0o08)
   
   And this what I would like to get: [http://cl.ly/image/3Q282M301M1m](http://cl.ly/image/3Q282M301M1m)
 * Thank you for your king help!
 * [http://wordpress.org/plugins/mailchimp/](http://wordpress.org/plugins/mailchimp/)

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [mc_dominic](https://wordpress.org/support/users/mc_dominic/)
 * (@mc_dominic)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/styling-checkboxes/#post-4330324)
 * Hi Jean-Philipe,
 * Thanks for posting to the forum. With the checkboxes in our plugin, each choice
   has an html <label> element and a html <input> element. Each of these choices
   are separated by a tag. This tag ‘breaks’ each choice to a new line. So you need
   to add a little css to your website to remove the and align the label and checkboxes.
 * To remove the break, first add this css to your website’s stylesheet.
 *     ```
       .mc_interest br {
       	display: none;
       }
       ```
   
 * This should only target the < br > in the checkbox group.
 * Next the width of the labels needs to be set so they align. To do that, change
   the display of the <label> from inline to inline-block. This will allow you to
   set a fixed width for the label elements. That css will look something like this:
 *     ```
       #mc_signup_form label.mc_interest_label {
       	display: inline-block;
       	width: 26%;
       }
       ```
   
 * I used a percentage here, so it can be sort of responsive. But you can use a 
   set px value or a min-width/max-width value. It’s up to you.
 * Have a great day!
 *  Thread Starter [Jeff](https://wordpress.org/support/users/photoreview/)
 * (@photoreview)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/styling-checkboxes/#post-4330486)
 * I’m pretty sure I answered your reply months ago but it seems my message disappeared.
   Hope you will find this one. Thank you very much for these pieces of CSS code.
   It works like a charm.
 * Have a good day!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Styling Checkboxes’ is closed to new replies.

 * ![](https://ps.w.org/mailchimp/assets/icon.svg?rev=3156997)
 * [Mailchimp List Subscribe Form](https://wordpress.org/plugins/mailchimp/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/mailchimp/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/mailchimp/)
 * [Active Topics](https://wordpress.org/support/plugin/mailchimp/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/mailchimp/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/mailchimp/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [Jeff](https://wordpress.org/support/users/photoreview/)
 * Last activity: [12 years, 1 month ago](https://wordpress.org/support/topic/styling-checkboxes/#post-4330486)
 * Status: resolved