Center Align Value Inside Number Field Using CSS Codes

What is the CSS code to center the value input for a numerical text box? 

Hi digitalstrategy,

Thanks for reaching out to Jotform Support. To center the numerical value inside the Number field, you can inject the custom CSS codes below. Let me show you how:

1. First, copy this code:

input[type="number"] {

  text-align: center;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

I also noticed that the Number field isn't centered when previewing the form. You can use the custom CSS below to align it properly to the center.

#id_72 {

  width: 100% !important;

  float: none !important;

  clear: both !important;

  text-align: center !important;

}

#cid_72 {

  position: relative;

  margin-left: 250px; /* adjusted from -80px */

}

Here's the sample result after injecting the custom CSS codes below:

Give it a try and let us know how it goes.

Hi Aries,

When I include your CSS code, it looks like something in the CSS code is conflicting and causing all text (comment box, orderable list, etc.) in the "Review before submit" widget to align center, as opposed to just center aligning the "Overall Score" number input box. Does your CSS code center align the number input box on the main body of the JotForm as well as in the "Review before submit" widget "? Would you mind taking a look?

Hi Aries,

You can update the CSS code provided by my colleague using this code below to center the input and when viewing it in Review Before Submit widget. Here's the code:

input#input_72 {

  text-align: center !important;

}

#previewContainer ul li:not(.control_head) div.value.border {

  text-align: center !important;

}

You can follow the steps provided by my colleague on how to add the CSS code to your form. Here's what it'll look like:

Give it a try and let us know how it goes.

Hi Jovito,

I am looking to center align only the number input field (input_72) and leave the other input fields left aligned in the "Review before submit" widget. Your CSS code center aligns all. I tried the below CSS code and it is not working:

/* Center-align content for input_72 in the Review Before Submit widget */

#reviewContainer .review-field[data-field-id="input_72"] td {

 text-align: center !important;

}

Hi digitalstrategy,

You can add the custom CSS code below into your form CSS code text field.

/* Specifically target the number field with data-qid="72" */

#previewContainer li.number[data-qid="72"] .value {

 text-align: center !important;

}

Be sure to place this custom CSS code at the very beginning of your CSS text field. Refer to the screencast below for guidance.

Here's the sample result in the Preview Before Submit page:

Give it a try and let us know how it goes.

Hi Aries,

The last sent CSS code worked to center align only the numeric input field. Thank you! Strangely, now a color outline is showing for all headers and input fields. Are you able to send CSS code to remove the color outline altogether?

Hi digitalstrategy,

I'll need a bit of time to look into this. I'll get back to you as soon as I can.

Thanks for your patience, we appreciate it.

Hi digitalstrategy,

You can use the CSS Code below to remove the outline color of the Input Table in the Review Before Submit widget.

div#previewContainer .value.border {

  border: none !important;

  outline: none !important;

  box-shadow: none !important;

}

Take a look at the screencast of the result below:

Give it a try and let us know how it goes.

Hi Joeni,

That worked perfectly, thank you!! By chance would you be able to give me the CSS code to change the font style, size, and color of the Input Tables in the "Review before submit" widget? I am looking to get it to look more closely to as is does in the main body of the JotForm (see below).

Hi digitalstrategy,

Can you tell us the font style, size, and color you want to for the Input Table values when viewed on Review Before Submit so we can provide the appropriate CSS code?

Once we hear back from you, we'll be able to help you with this.

Hi Jovito,

Font style: Inter

Font color: #005875

Font size: 14

Thanks!

Hi digitalstrategy,

To apply your desired custom styling to the Input Tables in the Preview Before Submit widget, simply inject the CSS code below:

#previewContainer table,

#previewContainer table * {

 font-family: 'Inter', sans-serif !important;

 color: #005875 !important;

 font-size: 14px !important;

}

Make sure to paste it at the top of your existing custom CSS in the CSS text field. Here's the sample result after injecting the codes:

Give it a try and let us know how it goes.

Hi Aries,

Thank you, thank you! The CSS code worked like a charm.

Thank you to the whole team. You all rock and were so helpful.