Is it possible to Redesign Spinner Button?

Hi, I'd like to have a "-" on the left, #value# in the middle, a "+" on the right. Is there any way of doing this with CSS?

Is there a workaround? Not the spinner Button as it is

Thanks

Since that is something that is doable with HTML, the most I could do with CSS is this:

Here is the link: https://form.jotform.com/73635437865973

If that could work for you, feel free to use this code:

td.form-spinner-down {

    position: relative;

    left: -63px;

    border: none!important;

    height: 10px!important;

    bottom: 5px;

    background: transparent!important;

}

td.form-spinner-up {

    position: relative;

    left: 19px;

    top: 14px;

    border: none!important;

    height: 10px!important;

    background: transparent!important;

}

td.form-spinner-down:before {

    content: "-";

    font-size: 12px;

    font-weight: bold;

}

td.form-spinner-up:before {

    content: "+";

    font-size: 12px;

    font-weight: bold;

}

Just paste it to your Custom CSS Field.

Let us know if you have any further questions.

Thank you!

Thanks a lot!! Loved it!

How can I make it prettier? I need it to be more narrow.

How can I change the size of the tet inside?

Can I have the Spinner in 1 column and the question in another?

Thanks!

You can make it more narrow by changing the width of the field.

 

You can change the font size using CSS:

.form-spinner input {
    font-size: 18px !important;
}

 

You can set the question text position in the field's properties:

 

DEMO: https://form.jotform.com/73637238581969

I also modified the CSS a bit:

td.form-spinner-down {

    position: relative;

    left: -33px;

    border: none!important;

    height: 10px!important;

    bottom: 10px;

    background: transparent!important;

}

 

td.form-spinner-up {

    position: relative;

    left: 17px;

    top: 13px;

    border: none!important;

    height: 10px!important;

    background: transparent!important;

}

 

td.form-spinner-down:before {

    content: "-";

    font-size: 12px;

    font-weight: bold;

}

 

td.form-spinner-up:before {

    content: "+";

    font-size: 12px;

    font-weight: bold;

}

 

.form-spinner input {

  font-size: 18px !important;

}

 

Thanks Adrian,

It doesn't feel comfortable though...

Thanks anyways!

How can we wider the surface of the click? To have a bit more space to click

Let me work on this and get back to you as soon as I have some information for you. 

Thank you for your patience.