# Formatting Checkboxes

**URL:** <https://community.hubspot.com/t/formatting-checkboxes/103856>\
**Category:** Tips, Tricks & Best Practices\
**Tags:** ctas, forms\
**Created:** [April 1, 2024, 9:30pm UTC](https://community.hubspot.com/t/formatting-checkboxes/103856 "2024-04-01T21:30:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kburnett](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kburnett/32/199947_2.png) [@kburnett](https://community.hubspot.com/u/kburnett)\
**Post date:** [April 1, 2024, 9:30pm UTC](https://community.hubspot.com/t/formatting-checkboxes/103856/1 "2024-04-01T21:30:56Z")

</div>

I’ve created a custom property comprised of four checkboxes. These checkboxes are displayed vertically, but I’d rather display them horizontally.

 ![kburnett_0-1712007005288.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/9/0/9001e064bab75f1386b605255208a8150e7e159d.png)

How can I display those checkboxes horizontally?

---

<div class="post-metadata">

**Author:** ![Ben\_M](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ben_m/32/2679_2.png) [@Ben\_M](https://community.hubspot.com/u/Ben_M)\
**Post date:** [April 2, 2024, 12:31am UTC](https://community.hubspot.com/t/formatting-checkboxes/103856/2 "2024-04-02T00:31:08Z")

</div>

Hard to say from a screenshot. We would need to see the page in question to examine the CSS on page to be able to advise what needs to be updated.

---

<div class="post-metadata">

**Author:** ![kburnett](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kburnett/32/199947_2.png) [@kburnett](https://community.hubspot.com/u/kburnett)\
**Post date:** [April 2, 2024, 1:25pm UTC](https://community.hubspot.com/t/formatting-checkboxes/103856/3 "2024-04-02T13:25:04Z")

</div>

The page in question?

[https://valleypl.com/](https://valleypl.com/)

But I can’t provide CSS from my end due to cross-domain restrictions.

It’s easy to turn a vertical column of checkboxes into a horizontal row of checkboxes using CSS, so if I could do it that way, I would have already done so.

---

<div class="post-metadata">

**Author:** ![Ben\_M](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ben_m/32/2679_2.png) [@Ben\_M](https://community.hubspot.com/u/Ben_M)\
**Post date:** [April 2, 2024, 3:22pm UTC](https://community.hubspot.com/t/formatting-checkboxes/103856/4 "2024-04-02T15:22:11Z")

</div>

While the checkboxes are in a flex container, they are inheriting a display:block override from a parent container. If you set the “hs-form\_\_field\_\_options\_\_container” class to display:flex instead of display:block the options should go horizontally instead of vertically.

---

<div class="post-metadata">

**Author:** ![kburnett](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kburnett/32/199947_2.png) [@kburnett](https://community.hubspot.com/u/kburnett)\
**Post date:** [April 2, 2024, 3:32pm UTC](https://community.hubspot.com/t/formatting-checkboxes/103856/5 "2024-04-02T15:32:55Z")

</div>

I can’t find any place in Hubspot to apply custom css to a Hubspot CTA or Form.

---

<div class="post-metadata">

**Author:** ![Ben\_M](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ben_m/32/2679_2.png) [@Ben\_M](https://community.hubspot.com/u/Ben_M)\
**Post date:** [April 2, 2024, 3:39pm UTC](https://community.hubspot.com/t/formatting-checkboxes/103856/6 "2024-04-02T15:39:08Z")

</div>

> * * *
> 
> @kburnett wrote:
> 
> I can’t find any place in Hubspot to apply custom css to a Hubspot CTA or Form.
> 
> * * *

Custom CSS can only be applied from your page on the website, not from within Hubspot. For advanced CSS customizations of forms you should be setting all of your forms as raw html from from the style tab and then performing all customizations from your website where those options are available. If you don’t do this, unfortunately your forms will be constrained by the editing limitations within the Hubspot editor.