Make selection option in payment field drop down/numbered?

Hello,

How can I make the payment options in the payment field have a drop down menu to the right with number options, so thay may take one or more courses? And then the Tuition field total that up?

Also, I'd luke to indent two of the options in same payment field.

See screen shot.

To meet your requirements that you showed us in your screenshot, please inject the following CSS codes to your form.

/*align quantity drop-down of product item*/

.form-product-item.hover-product-item:nth-child(-n+3) .form-product-item-detail br, .form-product-item.hover-product-item:nth-child(-n+3) .form-product-item-detail .form-sub-label-container .form-sub-label {

    display:  none !important;

}

.form-product-item.hover-product-item:nth-child(-n+3) .form-product-item-detail .form-sub-label-container {

    display: inline !important;

}

/*indent last 2 product item*/

.form-product-item.hover-product-item:nth-child(n+6) {

    text-indent: 30px !important;

}

How-to-Inject-Custom-CSS-Codes

Result:

Hmmm thank you but not working. There is other CSS code there so not sure...

Please check out the CSS code there and let me know why it's not working.

Also I'd like to make the indented text smaller, is that possible?

"Registration Fee (required if not yet paid): $ 165.00
 Annual Student Dues (required if not yet paid): $ 85.00"

I have added two custom CSS code to the code provided by my colleague, this will make the indented text smaller.

/*align quantity drop-down of product item*/

.form-product-item.hover-product-item:nth-child(-n+3) .form-product-item-detail br, .form-product-item.hover-product-item:nth-child(-n+3) .form-product-item-detail .form-sub-label-container .form-sub-label {

     display:  none !important;

}

.form-product-item.hover-product-item:nth-child(-n+3) .form-product-item-detail .form-sub-label-container {

     display: inline !important;

}

/*indent last 2 product item*/

.form-product-item.hover-product-item:nth-child(n+6) {

     text-indent: 30px !important;

}

span#product-name-input_18_1012.form-product-name{

    font-size:18px!important;

}

span#product-name-input_18_1013.form-product-name{

   font-size:14px!important;

}

By the way, you can't see the quantity selector because you did not enable it in your Payment Settings.

Please enable it, refer to my screencast:

Result:

Guide: How to Inject Custom CSS Codes.

Thank you much, this is perfect!

Hi, one last thing- 

I just tried deleting "Tuition Total" from the payment selection options and the indented option below jumped back to being un-indented. See screenshot. Tried figuting out the CSS code but not sure?

After deletion:

To fix the issue, please update the following custom CSS codes in your form.

Let us know if you need any further assistance.

Thank you!