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

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!!

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.

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.