-
mayumi.deleonAsked on December 1, 2020 at 8:31 AM
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
Page URL: https://form.jotform.com/203302298098457 -
Gaetan_BReplied on December 1, 2020 at 9:10 AM
Hello,
Thank you for reaching out!
I've been able to customize this part:
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