Help with styling the calculation boxes

Also, could you please help me with styling the calculation boxes... please see the image here...

I'd like a better looking box into which the numbers are entered and for the result.

Can you please specify what exact style changes you'd like to have so that we can provide the CSS for you.

You can share an annotated image or complete instructions like the color, font, size, border, etc.

We'll await for your response.

Hello there, thanks for getting back to me.

Well, something a little more appealing... maybe if both could be the same width, with a radius of say 33px, maybe blue background with white text?  

Thank you kindly - Andrew :)

Also, I have 'back' and 'next' buttons to direct people to the previous/next page, however, I have conditions which take the user to a specific page.

Is there a way to make the next button do nothing unless an option is selected?  If not, the user can merely click on next and end up with the wrong info.?

I suspect that's a piece of JS?

Hi there,

After some customizations here is how the next button looks:

If that is acceptable, then insert these codes into your Inject Custom CSS Area: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

.form-pagebreak button{

text-shadow: -1px -1px 0px #26a;

box-shadow: 0px 1px 1px 0px #79b3ee;

background: linear-gradient(to top, #00a0f0 0%, #0064f0 100%);

}

I would not suggest settings a condition to disable as it will most likely disable all next or back buttons, you may use SKIP PAGES to move to the next page or Hide fields to simulate that functionality: https://www.jotform.com/help/350-How-to-Skip-Pages-Using-Conditional-Logic

Let us know if you have any further questions.

Best.

Hi, thanks for this... I didn't make myself clear, sorry!

I meant to style the two boxes... 1. REQUIRED M2 and 1. JOB CST IN £

Please allow me some time to update the demo form for you. Will get back to you afterwards.

I have updated my demo form here: https://form.jotform.com/202493176720959

If you like its look, kindly add the CSS below:

::placeholder {

color: white;

}

input[type="number"].form-number-input {

background-color: #79b3ee;

color: white;

border: 1px solid #79b3ee;

border-radius: 33px;

padding-left: 5px;

outline: none;

width: 140px !important;

}

How-to-Inject-Custom-CSS-Codes

Excellent!  Thank you very much.

PS.  Is there a way I can have a £ as a default before the answer (where 1 Job Cost in £) is?

Hi there,

I checked the field and it seems that you have place the "symbol" as a placeholder:

Has this been resolved.

Best.