Over-rideable default CSS for unstyled embedded HubSpot forms

HubSpot Moderator

I'm including below CSS for overriding the default embedded forms CSS. A few things to note about this:

 

 

The selectors that I've written below are near-identical to the ones used in the default embedded forms. I've reduced the specificity as much as possible, while making sure that they're more specific than the default selectors. I've also kept all of the default declarations in the rulesets, which should make it easier to understand what to re-write. For example if you wanted to change input field widths in 1-column rows from 95% to 100%, you could just change:

 

form.hs-form fieldset.form-columns-1 .hs-input {
  width: 95%;
}

 

to:

 

form.hs-form fieldset.form-columns-1 .hs-input {
  width: 100%;
}

 

and include that in your CSS.

 

The goal here is just to make it easier to custom style your external, embedded forms without needing to write overly-specific selectors. And here's the CSS:

 

div.fn-date-picker.pika-single {
  z-index: 9999;
  display: block;
  position: relative;
  color: #333;
  background: #fff;
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  *zoom: 1;
}

div.fn-date-picker.pika-single.is-hidden {
  display: none;
}

div.fn-date-picker.pika-single.is-bound {
  position: absolute;
  box-shadow: 0 5px 15px -5px rgba(0,0,0,0.5);
}

div.fn-date-picker.pika-single:before,
div.fn-date-picker.pika-single:after {
  content: " ";
  display: table;
}

div.fn-date-picker.pika-single:after {
  clear: both;
}

div.fn-date-picker .pika-lendar {
  float: left;
  width: 240px;
  margin: 8px;
}

div.fn-date-picker .pika-title {
  position: relative;
  text-align: center;
}

div.fn-date-picker .pika-title select {
  cursor: pointer;
  position: absolute;
  z-index: 9998;
  margin: 0;
  left: 0;
  top: 5px;
  filter: alpha(opacity=0);
  opacity: 0;
}

div.fn-date-picker .pika-label {
  display: inline-block;
  *display: inline;
  position: relative;
  z-index: 9999;
  overflow: hidden;
  margin: 0;
  padding: 5px 3px;
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  background-color: #fff;
}

div.fn-date-picker .pika-prev,
div.fn-date-picker .pika-next {
  display: block;
  cursor: pointer;
  position: relative;
  outline: none;
  border: 0;
  padding: 0;
  width: 20px;
  height: 30px;
  text-indent: 20px;
  white-space: nowrap;
  overflow: hidden;
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 75% 75%;
  opacity: 0.5;
  *position: absolute;
  *top: 0;
}

div.fn-date-picker .pika-prev:hover,
div.fn-date-picker .pika-next:hover {
  opacity: 1;
}

div.fn-date-picker .pika-prev.is-disabled,
div.fn-date-picker .pika-next.is-disabled {
  cursor: default;
  opacity: 0.2;
}

div.fn-date-picker .pika-prev,
div.fn-date-picker .is-rtl .pika-next {
  float: left;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==");
  *left: 0;
}

div.fn-date-picker .pika-next,
div.fn-date-picker .is-rtl .pika-prev {
  float: right;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=");
  *right: 0;
}

div.fn-date-picker .pika-select {
  display: inline-block;
  *display: inline;
}

div.fn-date-picker .pika-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
}

div.fn-date-picker .pika-table th,
div.fn-date-picker .pika-table td {
  width: 14.28571%;
  padding: 0;
}

div.fn-date-picker .pika-table th {
  color: #999;
  font-size: 12px;
  line-height: 25px;
  font-weight: bold;
  text-align: center;
}

div.fn-date-picker .pika-table abbr {
  border-bottom: none;
  cursor: help;
}

div.fn-date-picker .pika-button {
  cursor: pointer;
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  border: 0;
  margin: 0;
  width: 100%;
  padding: 5px;
  color: #666;
  font-size: 12px;
  line-height: 15px;
  text-align: right;
  background: #f5f5f5;
}

div.fn-date-picker .pika-button:hover {
  color: #fff !important;
  background: #ff8000 !important;
  box-shadow: none !important;
  border-radius: 3px !important;
}

div.fn-date-picker .is-today .pika-button {
  color: #3af;
  font-weight: bold;
}

div.fn-date-picker .is-selected .pika-button {
  color: #fff;
  font-weight: bold;
  background: #3af;
  box-shadow: inset 0 1px 3px #178fe5;
  border-radius: 3px;
}

div.fn-date-picker .is-disabled .pika-button {
  pointer-events: none;
  cursor: default;
  color: #999;
  opacity: 0.3;
}

div.fn-date-picker .pika-week {
  font-size: 11px;
  color: #999;
}

form.hs-form .inputs-list.inline-list li {
  vertical-align: top;
  display: inline-block;
  word-wrap: break-word;
  padding-right: 16px;
}

form.hs-form .inputs-list.inline-list li:after {
  clear: both;
}

form.hs-form .inputs-list.inline-list li input {
  float: left;
}

form.hs-form .inputs-list.inline-list.inline-list-2 li {
  width: 50%;
}

form.hs-form .inputs-list.inline-list.inline-list-2 li:nth-child(2n) {
  padding-right: 0;
}

form.hs-form .inputs-list.inline-list.inline-list-3 li {
  width: 33%;
}

form.hs-form .inputs-list.inline-list.inline-list-3 li:nth-child(3n) {
  width: 34%;
  padding-right: 0;
}

div.hs-fieldtype-intl-phone.hs-input {
  padding: 0;
  background: none;
  border: none;
  height: auto;
}

div.hs-fieldtype-intl-phone.hs-input:after {
  clear: both;
  content: " ";
  display: table;
}

div.hs-fieldtype-intl-phone.hs-input .hs-input {
  margin-bottom: 0;
}

div.hs-fieldtype-intl-phone.hs-input input {
  width: 68% !important;
  float: right;
}

div.hs-fieldtype-intl-phone.hs-input select {
  float: left;
  width: 30% !important;
}

@media (max-width: 400px), (max-device-width: 480px) and (min-device-width: 320px) {
  form.hs-form > .hs-phone > .input > .hs-fieldtype-intl-phone.hs-input > input.hs-input {
    width: 68% !important;
  }

  form.hs-form > .hs-phone > .input > .hs-fieldtype-intl-phone.hs-input > select.hs-input {
    width: 30% !important;
  }
}

div.hs-input-range-container {
  width: 95%;
}

div.hs-input-range-container div {
  display: inline-block;
  line-height: 50px;
}

div.hs-input-range-container .hs-input-range {
  width: 90%;
  height: 40px;
}

div.hs-input-range-container .hs-input-range>* {
  vertical-align: middle;
}

div.hs-input-range-container .hs-input-range input {
  margin: 0 5px;
  width: 85%;
}

div.hs-input-range-container .hs-input-range-value-container {
  width: 10%;
}

div.hs-input-range-container .hs-input {
  width: 100% !important;
  margin-right: 1px;
  background-color: #fff;
  text-align: center;
}

input.hs-input-range__slider {
  appearance: none;
  margin: 0;
  height: 30px;
  overflow: hidden;
  cursor: pointer;
}

input.hs-input-range__slider:focus {
  outline: none;
}

input.hs-input-range__slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, #0199ff,#0199ff) 100% 50%/100% 3px no-repeat transparent;
}

input.hs-input-range__slider::-webkit-slider-thumb {
  position: relative;
  appearance: none;
  height: 13px;
  width: 13px;
  background: #0199ff;
  border-radius: 100%;
  border: 0;
  top: 50%;
  margin-top: -7.5px;
  /* removed box-shadow value due to character limit */
  box-shadow: ;
  transition: background-color 150ms;
}

input.hs-input-range__slider::-moz-range-track,
input.hs-input-range__slider::-moz-range-progress {
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, #cfcfcf,#cfcfcf) 100% 50%/100% 3px no-repeat transparent;
}

input.hs-input-range__slider::-moz-range-progress {
  background: linear-gradient(to bottom, #0199ff,#0199ff) 100% 50%/100% 3px no-repeat transparent;
}

input.hs-input-range__slider::-moz-range-thumb {
  appearance: none;
  margin: 0;
  height: 13px;
  width: 13px;
  background: #0199ff;
  border-radius: 100%;
  border: 0;
  transition: background-color 150ms;
}

input.hs-input-range__slider::-ms-track {
  width: 100%;
  height: 30px;
  border: 0;
  color: transparent;
  background: transparent;
}

input.hs-input-range__slider::-ms-fill-lower {
  background: linear-gradient(to bottom, #0199ff,#0199ff) 100% 50%/100% 3px no-repeat transparent;
}

input.hs-input-range__slider::-ms-fill-upper {
  background: linear-gradient(to bottom, #cfcfcf,#cfcfcf) 100% 50%/100% 3px no-repeat transparent;
}

input.hs-input-range__slider::-ms-thumb {
  appearance: none;
  height: 13px;
  width: 13px;
  background: #0199ff;
  border-radius: 100%;
  border: 0;
  transition: background-color 150ms;
  top: 0;
  margin: 0;
  box-shadow: none;
}

input.hs-input-range__slider:hover::-webkit-slider-thumb,
input.hs-input-range__slider:focus::-webkit-slider-thumb {
  background-color: #55c2ff;
}

input.hs-input-range__slider:hover::-moz-range-thumb,
input.hs-input-range__slider:focus::-moz-range-thumb {
  background-color: #55c2ff;
}

input.hs-input-range__slider:hover::-ms-thumb,
input.hs-input-range__slider:focus::-ms-thumb {
  background-color: #55c2ff;
}

div.hs-input-rating__container {
  width: 95%;
  margin-bottom: 30px;
  display: table;
  table-layout: fixed;
}

div.hs-input-rating__container section {
  display: table-row;
}

label.hs-input-rating__label {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

label.hs-input-rating__label input,
label.hs-input-rating__label svg {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
  cursor: pointer;
}

label.hs-input-rating__label svg {
  position: absolute;
  width: 45px;
  height: 45px;
  fill: #fff;
  stroke: #ccc;
  transform: scale(0.6);
  transition: transform 200ms ease-in-out;
}

label.hs-input-rating__label path {
  transition: fill 200ms ease-in-out,stroke 100ms ease-in-out;
}

div.hs-input-rating__is-star input {
  display: none;
}

svg.hs-input-rating__svg-is-selected {
  transform: scale(0.7);
}

svg.hs-input-rating__svg-is-selected path {
  fill: #f7e31b;
  stroke: #d7c508;
}

form.hs-form .hs-richtext {
  word-break: break-word;
}

form.hs-form.submitted-message {
  overflow: auto;
}

form.hs-form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  max-width: 500px;
}

form.hs-form fieldset.form-columns-1 .hs-input {
  width: 95%;
}

form.hs-form fieldset.form-columns-1 .input {
  margin-right: 8px;
}

form.hs-form fieldset.form-columns-1 input[type="checkbox"],
form.hs-form fieldset.form-columns-1 input[type="radio"] {
  width: auto;
}

form.hs-form fieldset.form-columns-2 .hs-form-field {
  width: 50%;
  float: left;
}

form.hs-form fieldset.form-columns-2 .input {
  margin-right: 8px;
}

form.hs-form fieldset.form-columns-3 .hs-form-field {
  width: 32.7%;
  float: left;
}

form.hs-form fieldset.form-columns-3 .input {
  margin-right: 8px;
}

form.hs-form label.hs-hidden {
  visibility: hidden;
}

form.hs-form .hs-field-desc {
  width: 100%;
}

form.hs-custom-style fieldset,
form.hs-custom-style .hs-input {
  max-width: 100%;
}

form.hs-custom-style fieldset.form-columns-3 .hs-form-field,
form.hs-custom-style > div.form-columns-3 .hs-form-field {
  width: 33.3%;
}

form.hs-custom-style fieldset > div:last-of-type .hs-input:not([type=checkbox]):not([type=radio]),
form.hs-custom-style > div > div:last-of-type .hs-input:not([type=checkbox]):not([type=radio]) {
  width: 100%;
  max-width: 100%;
}

form.hs-custom-style fieldset input:not([type="image"]):not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
form.hs-custom-style>div input:not([type="image"]):not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]) {
  box-sizing: border-box;
  padding: 0 15px;
  min-height: 27px;
}

@media (max-width: 400px), (min-device-width: 320px) and (max-device-width: 480px) {
  form.hs-custom-style fieldset,
  form.hs-custom-style .hs-input:not([type=checkbox]):not([type=radio]) {
    margin-right: 0 !important;
    width: 100% !important;
  }

  form.hs-form:not(.hs-video-form) .form-columns-2 div.hs-form-field,
  form.hs-form:not(.hs-video-form) .form-columns-3 div.hs-form-field {
    float: none;
    width: 100%;
  }

  form.hs-form:not(.hs-video-form) .form-columns-2 .hs-form-field input.hs-input,
  form.hs-form:not(.hs-video-form) .form-columns-3 .hs-form-field input.hs-input {
    width: 95%;
  }

  form.hs-form:not(.hs-video-form) .form-columns-2 div.hs-form-field input[type="checkbox"],
  form.hs-form:not(.hs-video-form) .form-columns-2 div.hs-form-field input[type="radio"],
  form.hs-form:not(.hs-video-form) .form-columns-3 div.hs-form-field input[type="checkbox"],
  form.hs-form-:not(.hs-video-form) .form-columns-3 div.hs-form-field input[type="radio"] {
    width: auto;
  }
}

div.legal-consent-container .field.hs-form-field {
  margin-bottom: 8px;
}

div.legal-consent-container .hs-field-desc.checkbox-desc {
  margin: -12px 0 0 21px;
}

div.legal-consent-container .hs-form-booleancheckbox-display input {
  float: left;
}

div.legal-consent-container .hs-form-booleancheckbox-display>span {
  display: block;
  margin-left: 20px;
}

div.legal-consent-container .hs-form-booleancheckbox-display p {
  margin: 0;
  display: inline;
}

div.legal-consent-container .hs-error-msgs label {
  color: #f2545b;
}

div.legal-consent-container ~ .hs_recaptcha {
  margin-top: 18px;
}

div.cookie-reset-container {
  font-size: 14px;
  margin-bottom: 10px;
  text-align: right;
}

form #hs-outer-captcha-target,
form #hs-outer-captcha-target * {
  display: none;
  height: 0;
  width: 0;
}

div.hubspot-link__container {
  font-size: 14px;
  padding-bottom: 40px;
  position: relative;
  color: #9fa0a2;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

span.hubspot-link-text {
  color: #00a4bd;
  font-weight: 400;
}

div.hubspot-link__container.sproket {
  color: #9fa0a2;
}

a.hubspot-link {
  text-decoration: none;
  color: #9fa0a2;
}

a.hubspot-link:hover {
  text-decoration: none;
}

a.hubspot-link:hover .hubspot-link-text {
  text-decoration: underline;
}

img.hubspot-link__icon {
  margin-bottom: -1px;
  margin-right: 5px;
}

div.hubspot-link__container.sproket .hubspot-link__icon {
  width: 30px;
  margin-right: 0px;
  float: left;
  margin-top: -9px;
  margin-left: -5px;
}

Leland Scanlan

HubSpot Developer Support
6 Replies 6
Highlighted
Advisor

Thanks @lscanlan 

 

Awesome resource!

Regular Advisor | Platinum Partner

@lscanlan , that is great!  throw that up onto github so it can easily be updated as necessary and possibly more discoverable? Or at minimum, cast a wider net Smiley Happy

dennis
Regular Advisor | Platinum Partner

@lscanlan , got too excited and added it here: https://github.com/beacondigitalmarketing/hubspotform-overide

 

Will happily transfer ownership if wanted Smiley Happy

dennis
Esteemed Contributor | Platinum Partner

would be a good idea I think even as a standalone piece to submit to the HubSpot Code Gallery. Though not sure where it would fit as it's currently structured for just custom modules I think.

Messages posted by this account have been preserved for their historical usefulness. Jon has a new profile now.
Reply
0 Upvotes
Esteemed Contributor | Platinum Partner

lscanlan thanks for posting this, I can see it being pretty helpful.

 

I won't guarantee it will make it in - because I want to get other community members input first, but if you don't mind, maybe we'll add this starter code to CrankShaft.


Here's the github issue:
https://github.com/TheWebTech/CrankShaft/issues/92

 

If you're not familiar with CrankShaft, the readme explains it well.
https://github.com/TheWebTech/CrankShaft

Messages posted by this account have been preserved for their historical usefulness. Jon has a new profile now.
Reply
0 Upvotes
HubSpot Moderator

Hey guys, this is awesome. I'm just glad you find it so useful!

 

@dennis_e No worries at all; keep it where you've got it on GH. Feel free to update it as you see fit, or of course if you want my input feel free to reach out.

 

@Jon_McLaren I have heard of CrankShaft and I think it's excellent. Include it however you want! For what it's worth I think John's comment on the issue you created makes sense.

Leland Scanlan

HubSpot Developer Support