Is it possible to Redesign Spinner Button?

  • Profile Image
    tiendaveggie
    Asked on December 30, 2017 at 11:17 AM

    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

  • Profile Image
    Nik_C
    Answered on December 30, 2017 at 02:27 PM

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

    1514661520Screen Shot 2017-12-30 at 8.23

    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!

  • Profile Image
    tiendaveggie
    Answered on December 30, 2017 at 03:44 PM

    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!

  • Profile Image
    Adrian
    Answered on December 30, 2017 at 07:17 PM

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

    1514679150narrow.png

     

    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:

    1514679384column.png

     

    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;

    }

     

  • Profile Image
    tiendaveggie
    Answered on December 30, 2017 at 07:57 PM

    Thanks Adrian,

    It doesn't feel comfortable though...

    Thanks anyways!

  • Profile Image
    tiendaveggie
    Answered on December 30, 2017 at 08:26 PM

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

  • Profile Image
    Kiran
    Answered on December 30, 2017 at 11:44 PM

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

    Thank you for your patience.