How to edit arrow in configurable list widget with its custom CSS?

  • Profile Image
    maksonglao
    Asked on August 15, 2016 at 05:47 AM

    Hi! 

    This is how the Configurable list looks now:

    What do I add in the widget's Custom CSS to make the Quantity arrows look like the Author arrow (black arrow, white background, no border)? 

    Down: a.stepper-btn-dwn

    Up: a.stepper-btn-up

    Thank you!!

  • Profile Image
    John_Benson
    Answered on August 15, 2016 at 09:44 AM

    The arrows that you are referring is actually an image. This image are being called as a background image for the element. Please give me more time to work on this issue. I will contact you via this thread once I have a solution.

    Thank you for understanding.

  • Profile Image
    John_Benson
    Answered on August 15, 2016 at 10:22 AM

    Thank you for patiently waiting.

    This can be done by changing the image with black arrows and some custom CSS. I actually downloaded the arrow image and change its color. After that, I uploaded it here in JotForm. Please follow the steps below:

    1. Select the Configurable List widget field and then click the wizard icon.

    2. Go to the Custom CSS tab inside the widget.

    3. Insert this custom CSS code:

    .stepper-btn-wrap .stepper-btn-dwn, .stepper-btn-wrap .stepper-btn-up {
    background: url(https://cms.jotform.com/uploads/image_upload/image_upload/John_Benson/38013_arrow-black.png) no-repeat #eee;
    }

    .stepper-btn-wrap .stepper-btn-up {
    background-position: center -4px;
    border-bottom: 1px solid #ccc;
    top: 0;
    }

    .stepper-btn-wrap .stepper-btn-dwn {
    background-position: center -22px;
    bottom: 0;
    }

    The result should look like this:

    Hope that helps. Let us know if you need further help. Thank you.