How to edit the font color of my categories?

  • Profile Image
    mayumi.deleon
    Asked on December 01, 2020 at 08:31 AM

    1606829370_5fc6453ae35df_

    Hello! I want to change the font family and font size of the categories drop down list. I used a lot of css to change some colors and styles of my overall form, but I couldn't figure out how to change this one. My form is here: https://form.jotform.com/203302298098457

  • Profile Image
    Gaetan_B
    Answered on December 01, 2020 at 09:10 AM

    Hello,

    Thank you for reaching out!


    I've been able to customize this part:

    1606831690_5fc64e4a96581_


    I've made a few corrections and additions to your CSS to make sure it works.

    I'm gonna give you the full code down there and to find where I changed something, you will just have to look for font-family: Impact




    .form-product-container {
        background #fff;
    }


    #cid_4 div.form-product-container {
        background #fff;
    }


    .form-product-item.hover-product-item.on_col3.show_image.show_option.new_ui {
        background #f7f6f5;
    }


    .form-product-item.hover-product-item.on_col1.show_image.show_option.new_ui {


    }


    #cid_4 span.form-product-item {
        background #fff;
    }


    .undefined div {


    }


    .form-product-name {
        color #000;
        font-family 'Playfair Display';
        text-transform : lowercase;
    }


    .form-product-category-item.title_collapsed {


    }


    #cid_4 span.form-product-category-item {
        font-family 'Playfair Display';
        font-size 18px;
        text-transform : lowercase;
    }


    .form-product-description {
        color #000;
        font-size 10px;
        font-family : verdana;
    }


    .form-dropdown {
        font-size 12px;
        font-family : verdana;
        text-transform : uppercase;
    }


    .form-sub-label {
        color #000;
        font-family : verdana;
        text-transform : uppercase;
        font-size 12px;
    }


    .undefined span {


    }


    .total_area .currency_abr {
        font-size 20px;
    }


    .form-product-details b {
        font-family : verdana;
        color #000;
        font-size 12px;
    }


    #input_4_custom_1001_1 {


    }


    .form-checkbox.form-product-input {


    }


    #input_4_1002 {


    }


    .payment_footer.new_ui {


    }


    #cid_4 div.payment_footer {
        width 100%;
        font-size 20px;
    }


    .total_area {
        COLOR #fff;
        font-family : verdana;
        margin-right 10px;
        font-size 20px;
        border-bottom 1px;
        border-color : white;
    }


    .form-payment-total div {
        text-transform : lowercase;
    }


    .form-pagebreak-next {
        border-radius 0px;
        background #fff;
        color : black;
        font-family 'Playfair Display';
        text-transform : lowercase;
    }


    .form-pagebreak {


    }


    #cid_10 div.form-pagebreak {
        border : none;
    }


    #sublabel_11_first {
        color #fff;
    }


    #sublabel_11_last {
        color #fff;
    }


    #sublabel_input_31 {
        color #fff;
    }


    #sublabel_16_masked {
        color #fff;
    }


    #sublabel_input_13 {
        color #fff;
    }


    #sublabel_24_addr_line1 {
        color #fff;
    }


    #sublabel_24_addr_line2 {
        color #fff;
    }


    #sublabel_24_city {
        color #fff;
    }


    #sublabel_24_state {
        color #fff;
    }


    #sublabel_24_postal {
        color #fff;
    }


    .form-label.form-label-top {
        font-family 'Playfair Display';
        text-transform : lowercase;
        color #fff;
    }


    #label_11 {
        font-family 'Playfair Display';
        text-transform : lowercase;
    }


    .form-required {
        color : orange;
    }


    .form-textbox {
        font-family : verdana;
        font-size 12px;
        border-radius 0;
        color #000;
    }


    #last_11 {


    }


    #input_13 {


    }


    .form-line.jf-required {


    }


    #id_13 {


    }


    .form-pagebreak-back {
        border-radius 0px;
        background #fff;
        color : black;
        font-family 'Playfair Display';
        text-transform : lowercase;
    }


    .form-submit-button {
        border-radius 0px;
        background #fff;
        color : black;
        font-family 'Playfair Display';
        text-transform : uppercase;
        text-transform : lowercase;
    }


    .form-product-category-item  last_p_category title_collapsed has_selected_product b {


    }


    .form-product-category-item title_collapsed b {


    }


    .form-header-group.header-large {
        border : none;
    }


    .selected-values {
        color : grey;
        font-family : Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    }


    .form-product-category-item  last_p_category has_selected_product b {


    }


    #productSearch-input {
        font-family : verdana;
        font-size 12px;
        text-transform : uppercase;
        text-color #000;
    }


    .select-area {
        border-radius 0px;
        font-family : Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    }


    .dropdown-hint {
        font-family : Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        text-transform : uppercase;
        font-size 12px;
    }


    .form-section.page-section {


    }


    .form-line.card-3col {


    }


    #payment-category-dropdown div.select-area {
        color #000;
        font-family'Courier New', Courier, monospace;
    }


    #payment-category-dropdown span.dropdown-hint {
        font-size 12px;
        color #000;
    }


    .form-subHeader {
        font-family 'Roboto';
        text-transform : uppercase;
    }


    #subHeader_1 {
        font-size 12px;
    }


    .form-product-category-item b {


    }


    #cid_4 b.hover {


    }


    #label_23 {


    }


    .form-buttons-wrapper.form-buttons-auto.jsTest-button-wrapperField {
        border : none;
    }


    #total-text {
        font-size 20px;
        font-family 'Playfair Display';
        text-transform : lowercase;
    }


    #cid_4 span.currency_abr {


    }


    .form-payment-price span {
        font-family 'Playfair Display';
        font-size 20px;
    }


    #payment_total {
        font-size 20px;
        font-family 'Playfair Display';
    }


    .form-payment-price hoverSticky span {


    }


    #form-pagebreak-next_10 {


    }


    .form-payment-price {
        font-size 20px;
    }


    #cid_4 div.form-payment-total {
        font-size 20px;
    }


    .image_zoom {


    }


    .formLogoWrapper.Center {


    }


    .formLogoImg {


    }


    #203302298098457 img.formLogoImg {


    }


    #203302298098457 div.formLogoWrapper {


    }


    #cid_1 div.form-header-group {


    }


    .form-error-message {


    }


    #cid_16 div.form-error-message {


    }


    #label_31 {


    }


    #label_13 {


    }


    #cid_24 div.form-error-message {


    }


    #cid_31 div.form-error-message {


    }


    #cid_4 span.hover {


    }


    #cid_4 label.form-sub-label {


    }


    .form-product-container hoverSticky span {


    }


    #cid_4 span.hover {


    }


    #input_4_custom_1003_1 {


    }


    #payment-category-dropdown span.selected-values {
        color #000;
    }


    .dropdown-container {
      font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    }



    .dropdown-container .select-content {
      color#000;
    }


    Hopefully, this will help solve the matter at hand.

    Should you have any further inquiries, please don't hesitate to reply to this thread.

    Gaetan