Calendar Styling isn't working

I have styled this calendar on another form without issues. When styling on my current form, it's as if the styling isn't taking effect.

Is there something I need to do differently? I have applied my CSS.

/*calendar styling*/

.calendar table, tr.days, .title{

    width: 400px;

    color: #144564 !important;





}





/*calendar days text color*/

.calendar tr.days td:hover:not(.unselectable) {

    color: rgba(255, 255, 255, 1) !important;

}





/*calendar days background color*/

.calendar tr.days td:hover:not(.unselectable):after {

    border: none;

    background: rgba(94, 114, 134, 1);

}





/*calendar month and year colors*/

.calendar-new-month,

.calendar-new-year{

    background-color: rgba(80, 86, 92, 0.5);

    color: rgba(0, 51, 102, 1);

}





/*calendar popup basic*/

.calendar.popup {

    border: none !important;

    border-radius: 4px;

}





/*calendar day numbers*/

.calendar.popup table tbody .days td {

    color: rgba(0, 51, 102, 1);

    font-weight: bold;

    font-family: Helvetica, sans-serif;

    font-size: 11px !important;





}





/*calendar weekdays header*/

.calendar.popup th {

    background-color: rgba(0, 51, 102, 1);

    color: rgba(255, 255, 255, 1);

}





/*calendar day selected background color*/

.calendar.popup tr.days td.selected {

    color: rgba(255, 255, 255, 1) !important;





}

.calendar.popup tr.days td.selected:after {

    background-color: rgba(0, 51, 102, 1);

}





/*calendar day current day border color*/

.calendar.popup tr.days td.today:not(.selected) {

    color: rgba(0, 51, 102, 1); 

}

.calendar.popup tr.days td.today:not(.selected):after {

    border: 1px solid rgba(0, 51, 102, 1);

}





/*calendar days [notselected]*/

.calendar.popup table tbody td:after {

    position: absolute;

    left: 5px;

    content: "";

    top: 5px;

    width: calc(100% - 10px);

    height: calc(100% - 10px);

    background: rgba(80, 86, 92, 0.2);

    border: 1px solid transparent;

    z-index: -1;

    border-radius: 4px;

}





/*date field width*/

.notLiteMode .form-sub-label-container {

    min-width: 100px;

}





/*date sub label text*/

.form-sub-label {

    color: rgba(0, 51, 102, 1);

}





/*date picker image*/

li[data-type="control_datetime"] .extended .allowTime-container + .form-sub-label-container, li[data-type="control_datetime"] .extended > .form-sub-label-container:nth-child(3) + .form-sub-label-container {

    height: 2.5em;

    border-radius: 4px;

    background-image: url(https://48638660.fs1.hubspotusercontent-na1.net/hubfs/48638660/assets/images/calendar.png);

    background-size: 48px;

    max-width: 48px;

    min-width: 48px;

    background-repeat: no-repeat;

    background-position: right 0px bottom 50%;

    position: relative;

    margin: 0 1px;

    background-color: transparent;

}





/*date month and year arrow*/

.appointmentCalendarContainer .monthYearPicker .pickerArrow:after, .calendar-new-header .button {

    background-color: rgba(80, 86, 92, 1);

}

Hi Callahan_Pedersen,

Thanks for reaching out to Jotform Support. I tested the CSS you shared on a sample form using the Date Picker element, and it had no visible effect. This is expected, as the Date Picker uses a different internal structure compared to other calendar components, such as those used in the Appointment or Datetime fields.

It seems the styling you're applying may have worked on a different form using a different calendar widget or layout. Since the form where the styling worked as expected wasn’t shared, I can’t confirm what element it was targeting.

To help you further, could you share the link to the form where the CSS was successfully applied? That way, we can compare the working setup and advise you on how to adjust the styling for your current form. You can easily find your form's URL in Form Builder. Let me show you how:

1. In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
2. In the Quick Share tab, click on Copy Link in the Share With Link section.

Once you share the form URL with us, we’ll be able to help you better with this.

Here's the URL to another form I have with a styled Date of Birth Calendar.

https://www.jotform.com/Callahan_Pedersen/applicant-pre-screen?applicant_fullName[first]=Jason&applicant_fullName[last]=Ritter&applicant_phoneNumber[full]=5555555555&applicant_peopleInHome=1&applicant_adultsInHome=1&applicant_dateOfBirth[month]=07&applicant_dateOfBirth[day]=30&applicant_dateOfBirth[year]=1987

Hi Callahan_Pedersen,

I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Thanks for your patience, we appreciate it.

Hi Callahan_Pedersen,

Can you try replacing your full CSS code using this one?

body,

.form-all {

  margin-top: 0px;

  box-shadow: none !important;

}



.supernova,

body {

  background: none;

}



a.contactInfo,

a:active.contactInfo,

a:visited.contactInfo {

  color: rgba(39, 45, 51, 1);

  font-family: Helvetica, sans-serif;

  font-size: 18px;

}



a:hover.contactInfo {

  color: #003366;

  text-decoration: none;

}



table.contactInfoTable,

td.contactInfoTable,

tr.contactinfoTable {

  font-weight: 800;

}



.form-label.form-label-auto {

  display: block;

  float: none;

  text-align: left;

  width: 100%;

}



.form-submit-button {

  background: #003366 !important;

  border-color: #003366;

  border: 3px !important;

  position: absolute;

  top: 25%;

  left: 42px;

  width: 25%;

}



.form-submit-button:hover {

  background: #ffffff !important;

  border-color: #003366 !important;

  border-style: solid !important;

  border-width: 3px;

  color: rgba(39, 45, 51, 1) !important;

}



.form-submit-print,

.form-submit-print:focus {

  display: flex;

  position: absolute;

  left: 21%;

  margin-top: 65px;

  text-decoration: none;

  font-family: Helvetiva;

  font-size: 16px;

  color: #003366 !important;

  /*height : 15px;

  */

  background-color: transparent !important;

  border: none;

  font-weight: bold;

}



.form-submit-print:hover {

  color: #5196db !important;

}



.form-submit-reset {

  display: flex;

  position: absolute;

  left: 30px;

  margin-top: 0;

  font-family: Helvetiva;

  font-size: 16px !important;

  color: #003366;

  /*height : 15px !important;

  */

  text-decoration: none;

  background-color: transparent !important;

  /*border : none;

  */

  font-weight: bold !important;

}



.form-submit-reset:hover {

  color: #5196db;

}



.form-line-active {

  background-color: transparent !important;

}



input:focus,

input:hover,

textarea:focus,

textarea:hover,

select:focus,

select:hover {

  outline: none !important;

  border: none !important;

  box-shadow: 0 0 2px 2px #003366 !important;

}



select,

select#input_42_month,

select#input_42_day,

select#input_42_year {

  background-color: rgba(94, 114, 134, 0.25) !important;

}



.form-buttons-wrapper.form-buttons-left.jsTest-button-wrapperField {

  border: 0px;

  padding-top: 50px;

}



.form-radio:checked + label::before {

  border: 2px solid #003366 !important;

  color: #003366;

}



/*form radio button selected*/

.form-radio + label:after,

.form-radio + span:after {

  background-color: #003366 !important;

}



/*radio button border color*/

.form-radio:checked + label:before {

  border-color: #003366 !important;

}



/*form radio button hover*/

.form-radio:hover + label::before {

  box-shadow: 0px 0px 2px 2px #003366 !important;

}



.form-product-item .p_checkbox input[type="radio"]:checked ~ div.select_border {

  border: 2px solid #003366 !important;

}



.form-dropdown:first-child {

  background-color: rgba(94, 114, 134, 0.2);

  color: rgba(39, 45, 51, 1) !important;

}



.select_border:hover {

  box-shadow: 4px 4px 32px 1px rgba(0, 51, 102, 0.75) !important;

}



.input_print_2 {

  background: linear-gradient(90deg, #ffb629, #da9000 50%) !important;

}



.span_print_2 {

  color: #fff !important;

}



#form-submit-button,

#form-submit-button:hover {

  display: block;

  left: -100px;

}



/*appointment calendar numbers*/

.appointmentCalendar .calendarDay {

  font-weight: bold !important;

  color: rgba(0, 51, 102, 1) !important;

  font-family: Helvetica, sans-serif;

  font-size: 11px;

}



/*appointment calendar full date styling*/

.selectedDate {

  /*Date, month/year*/

  background: rgba(255, 255, 255, 1);

  border-radius: 4px;

}



/*appointment calendar weekday headers*/

.appointmentCalendar .dayOfWeek {  /*Days of the week abbreviation*/

  background-color: rgba(0, 51, 102, 1) !important;

  /*Background*/

  color: rgba(255, 255, 255, 1) !important;

  /*Text*/

}



.appointmentCalendar .dayOfWeek, .calendar.popup th, .clear-pad-btn {

  background-color: rgba(0, 51, 102, 1) !important;

  /*Background*/

  color: rgba(255, 255, 255, 1) !important;

  /*Text*/

}



/*appointment calendart Monday and Year styling*/

.appointmentCalendarContainer .monthYearPicker .pickerItem select {

  border: none;

  background-color: rgba(80, 86, 92, 0.5);

  color: rgba(0, 51, 102, 1);

}



.appointmentCalendarDays {

  /*Calendar Background*/

  background: rgba(255, 255, 255,);

}



.calendarDay:not(.isUnavailable) {

  /*Available days*/

  color: rgba(0, 51, 102,1) !important;

}



.calendarDay.isUnavailable {

  /*Unavailable days*/

  color: rgba(80, 86, 92, .25) !important;

  background-color: rgba(80, 86, 92, 0.05);

}



.appointmentCalendar .calendarDay.isActive .calendarDayEach,

.appointmentCalendar .calendarDay:after {

  color: rgba(255, 255, 255, 1) !important;

  background-color: rgba(0, 51, 102, 1)!important;

  /*Selected date box*/

  border-color: #003366;

  box-shadow: none !important;

}



.appointmentCalendar .calendarDay,

.appointmentCalendar .calendarDay.isActive,

.appointmentCalendar .calendarDay:focus,

.appointmentCalendar .calendarDay:focus-visible,

.appointmentCalendar .calendarDay[aria-pressed="true"] {

  outline: none !important;

  box-shadow: none !important;

  border: none !important;

}





/* Change appointment field calender dates hover background color -#15387281 */

.calendarDay:hover {

  background: rgba(94, 114, 134, 1);

  color: white !important;

  border: none !important;

}



/*appointment slot styling*/

.appointmentCalendarContainer .monthYearPicker .pickerItem select {

  color: #003366 !important;

  font-weight: bold;

}



/*hide timezone*/

.jDropdownWG-dropdown-toggler {

  display: none;

}



/* Change appointment field slot color and bg color - 003366*/

.appointmentSlot.slot .appointmentFieldRow,

.appointmentSlot {

  background-color: rgba(0, 51, 102, 0.2) !important;

  border-color: rgba(0, 51, 102, 1);

  color: rgba(0, 51, 102, 1) !important;

}



/* Change appointment field active slot color and bg color - 003366*/

.appointmentSlot.slot.active,

.appointmentFieldRow.forSelectedDate,

.appointmentSlot.active {

  background-color: rgba(0, 51, 102, 1) !important;

  color: rgba(255, 255, 255, 1) !important;

}



/* Change appointment field active slot color and bg color - 003366*/

.appointmentSlot.slot:hover {

  background-color: #003366 !important;

  color: #ffffff !important;

}



/*appointment callender is today*/

.appointmentCalendar .calendarDay.isToday {

  background-color: rgba(0, 51, 102, 1) ;

  color: rgba(255, 255, 255, 1);

  border: none;

}



/**appointment calendar is today and is unavailable*/

.appointmentCalendar .calendarDay.isToday.isUnavailable {

   

  color: rgba(80, 86, 92, .25) !important;

  background-color: rgba(80, 86, 92, 0.05);

}

button.cancel.cancelSelectionBtn {

  background-color: #ffffff;

  color: #003366;

}



button.cancel.cancelSelectionBtn:hover {

  background-color: rgba(255, 255, 255, 0.7);

  color: #003366;

}



@media only screen and (max-width: 800px) {

  .form-submit-button {

    position: absolute;

    top: 20%;

    left: 0px;

    /*without this, the button had padding on the left by default*/

    width: 100%;

  }



  .form-submit-button:hover {

    background: #ffffff !important;

    border-color: #003366 !important;

    border-style: solid !important;

    border-width: 3px;

    color: #003366 !important;

  }



  .form-submit-print,

  .form-submit-print:active,

  .form-submit-print:visited,

  .form-submit-print:focus {

    display: flex;

    position: absolute;

    right: 0;

    left: 84%;

    top: 10%;

    font-family: Helvetiva;

    font-size: 16px;

    color: #003366 !important;

    background-color: transparent !important;

    border: none;

    font-weight: bold;

    text-decoration: none !important;

  }



  .form-submit-print:hover {

    text-decoration: none !important;

    display: flex;

    position: absolute;

    left: 60%;

    top: 10%;

    font-family: Helvetiva;

    font-size: 16px;

    color: #5196db !important;

    background-color: transparent !important;

    border: none;

    font-weight: bold;

  }



  .form-submit-reset,

  .form-submit-reset:active,

  .form-submit-reset:visited,

  .form-submit-reset:focus {

    color: #003366 !important;

    display: flex;

    position: absolute;

    left: 0%;

    top: 0;

    font-family: Helvetiva;

    font-size: 18px;

    background-color: transparent !important;

    border: none;

    font-weight: bold;

  }



  .form-submit-reset:hover {

    text-decoration: underline;

    color: #5196db !important;

  }



  a.contactInfo,

  a:active.contactInfo,

  a:visited.contactInfo {

    color: rgba(39, 45, 51, 1);

    font-family: Helvetica, sans-serif;

    font-size: 12px;

  }



  a:hover.contactInfo {

    color: rgba(39, 45, 51, 1);

    text-decoration: none;

  }



  table.contactInfoTable,

  td.contactInfoTable,

  tr.contactinfoTable {

    font-weight: 800;

  }



  .form-submit-print {

    text-decoration: none !important;

  }



  ul.form-section {

    padding: 0px 0px;

  }

}



@media only screen and (max-width: 800px) {

  .form-submit-button {

    margin-left: 0 !important;

  }



  .form-submit-print,

  .form-submit-print:active,

  .form-submit-print:visited,

  .form-submit-print:focus {

    left: 60%;

  }



  .form-submit-reset,

  .form-submit-reset:active,

  .form-submit-reset:visited,

  .form-submit-reset:focus {

    top: 19%;

    left: 4%;

  }

}





/*calendar styling*/

div#calendar_10.calendar table, tr.days, .title{

  width: 400px;

  color: #144564 !important;



}



/*calendar days text color*/

div#calendar_10.calendar tr.days td:hover:not(.unselectable) {

  color: rgba(255, 255, 255, 1) !important;

}



/*calendar days background color*/

div#calendar_10.calendar tr.days td:hover:not(.unselectable):after {

  border: none;

  background: rgba(94, 114, 134, 1);

}



/*calendar month and year colors*/

.calendar-new-month,

.calendar-new-year{

  background-color: rgba(80, 86, 92, 0.5);

  color: rgba(0, 51, 102, 1);

}



/*calendar popup basic*/

.calendar.popup {

  border: none !important;

  border-radius: 4px;

}



/*calendar day numbers*/

div#calendar_10.calendar.popup table tbody .days td {

  color: rgba(0, 51, 102, 1);

  font-weight: bold;

  font-family: Helvetica, sans-serif;

  font-size: 11px !important;



}



/*calendar weekdays header*/

div#calendar_10.calendar.popup th {

  background-color: rgba(0, 51, 102, 1) !important;

  color: rgba(255, 255, 255, 1) !important;

}



/*calendar day selected background color*/

div#calendar_10.calendar.popup tr.days td.selected {

  color: rgba(255, 255, 255, 1) !important;



}

div#calendar_10.calendar.popup tr.days td.selected:after {

  background-color: rgba(0, 51, 102, 1);

}



/*calendar day current day border color*/

div#calendar_10.calendar.popup tr.days td.today:not(.selected) {

  color: rgba(0, 51, 102, 1); 

}

div#calendar_10.calendar.popup tr.days td.today:not(.selected):after {

  border: 1px solid rgba(0, 51, 102, 1);

}



/*calendar days [notselected]*/

div#calendar_10.calendar.popup table tbody td:after {

  position: absolute;

  left: 5px;

  content: "";

  top: 5px;

  width: calc(100% - 10px);

  height: calc(100% - 10px);

  background: rgba(80, 86, 92, 0.2);

  border: 1px solid transparent;

  z-index: -1;

  border-radius: 4px;

}



/*date field width*/

.notLiteMode .form-sub-label-container {

  min-width: 100px;

}



/*date sub label text*/

.form-sub-label {

  color: rgba(0, 51, 102, 1);

}



/*date picker image*/

li[data-type="control_datetime"] .extended .allowTime-container + .form-sub-label-container, li[data-type="control_datetime"] .extended > .form-sub-label-container:nth-child(3) + .form-sub-label-container {

  height: 2.5em;

  border-radius: 4px;

    background-image: url(https://48638660.fs1.hubspotusercontent-na1.net/hubfs/48638660/assets/images/calendar.png);

  background-size: 48px;

  max-width: 48px;

  min-width: 48px;

  background-repeat: no-repeat;

  background-position: right 0px bottom 50%;

  position: relative;

  margin: 0 1px;

  background-color: transparent;

}



/*date month and year arrow*/

div#calendar_10.appointmentCalendarContainer .monthYearPicker .pickerArrow:after, .calendar-new-header .button {

  background-color: rgba(80, 86, 92, 1);

}



/****

 * Aquarium Size Selections

 ****/

select:has(option[value="30 gallon"]:checked),

select:has(option[value="40 gallon"]:checked),

select:has(option[value="55 gallon"]:checked),

select:has(option[value="75 gallon"]:checked),

select:has(option[value="90 gallon"]:checked),

select:has(option[value="More than 90 gallon"]:checked) {

  color: red !important;

}

Here's what it'll look like:

Give it a try and let us know how it goes.

Thank you! This worked. Sometimes is super confusing coming from one form to another and the same data element being different across forms.

Hi Callahan_Pedersen,

Sometimes, the CSS code you have used on a different form might not work on the other form, even if you have used the same field type. But, you can always reach us out to assist you with your concern so we can be able to provide you the correct CSS selector and values so it will work on your form.

Let us know if you have any other questions.