Jump to content

CSS and JavaScript Attempts to Center Text in Form Field

Recommended Posts

Hi everyone!

I'm really hitting a wall trying to get text to center in a form field on my Squarespace site. I've tried pretty much everything I can think of with CSS and JavaScript, but nothing's making a dent. Here's the scoop on what I've been up to:

What I'm Trying to Do:

  • Just trying to get any text that's typed into a specific form field to be center-aligned. Sounds simple, right?

What I've Been Up To:

  1. Going Specific with CSS:

    • Started off by targeting the form's unique block ID (.fe-block-yui_3_17_2_1_1700432464042_13281) and threw in some CSS to center the text (text-align: center;). No luck there.
  2. Trying a Broader Approach:

    • Decided to widen the net with a more general selector: .form-wrapper .field-list .caption-text.
    • The idea was to catch the form field without just banking on the block ID. Still no dice.
  3. Pulling Out the Big Guns with !important:

    • Even tried to force it by using !important in my CSS (text-align: center !important;), thinking it might override something else that was in the way. Nope.
  4. Back to Basics:

    • Thought maybe I was missing something obvious, so I tested just applying an italic style (font-style: italic !important;) to see if any CSS would work. Weirdly, even that didn't do anything.
  5. Taking a Crack at JavaScript:

    • Figured maybe CSS just wasn't going to cut it, so I tried JavaScript. Wrote a little script to apply text-align: center; to the input fields. But, guess what? Still stuck with left-aligned text.

      So, that's where I'm at. It's like whatever I do, the text just wants to stick to the left. If anyone's cracked a nut like this before or has any tricks up their sleeve, I'm all ears!

Thanks a ton in advance!

Link to comment
  • Replies 2
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Hi, please share a link to your website so we can check easier

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)
🧰 See the tools I use (may contain affiliate links)


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.