Solved
Checkbox Styling
Hi - having issues styling checkboxes in one of our forms.
This is the test page: https://www.recastsoftware.com/test-marketo-forms/
And this is what the checkboxes are supposed to look like: https://www.recastsoftware.com/request-a-quote
Code is below!
/* Add your custom CSS below */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;700&display=swap');
.mktoForm{
max-width:100%!important;
font-family: "Work Sans",sans-serif;
}
.mktoFrom *{font-family: "Work Sans",sans-serif!important;}
.mktoFormRow {
width: 100%;
float: none;
}
.mktoForm .mktoLabel {
float: none!important;
}
.mktoFormCol,
.mktoFieldWrap {
width: 100% !important;
}
.mktoForm .mktoOffset {
display: none!important;
}
.mktoFieldDescriptor.mktoFormCol {
margin-bottom: 0px!important;
}
.mktoForm .mktoFieldWrap {
float: left;
position: relative;
}
.mktoForm input[type="text"], .mktoForm input[type="url"], .mktoForm input[type="email"], .mktoForm input[type="tel"], .mktoForm input[type="number"], .mktoForm input[type="date"], .mktoForm select.mktoField, .mktoForm textarea.mktoField {
width:100%!important;
outline:none!important;
padding:15px 15px 12px!important;
border:1px solid #323e48!important;
box-shadow: none!important;
background-color:#f2f5f4!important;
color:#323e48!important;
}
.mktoLabel{
font-family: "Work Sans",sans-serif;
letter-spacing: .17px!important;
line-height: 1.42!important;
font-size: 16px!important;
-webkit-transition: .2s all;
transition: .2s all!important;
cursor: text!important;
color: #323e48!important;
width: 100% !important;
font-weight:normal!important;
}
.mktoForm .mktoGutter {
display:none!important;
}
.mktoForm .mktoAsterix {
display:none!important;
}
.mktoForm .mktoFormRow {
clear: none !important;
margin-bottom:2.2rem;
}
.mktoButtonRow{
width:100%!important;
text-align: center!important;
}
.mktoButtonWrap.mktoInset {
margin-left:0px!important;
}
.mktoButtonWrap{
margin-left:0px !important;
}
#Number_of_Endpoints__c option:hover{
background:#29abe2!important;
}
.mktoButton{
line-height: 1.33;
letter-spacing: .92px;
text-transform: uppercase;
font-size: 14px;
font-family: "Work Sans",sans-serif;
font-weight: 700;
border-radius: 4px!important;
background: #29abe2!important;
border: 2px solid #29abe2!important;
color: #e0e4e1!important;
padding: 0.5rem 1.2rem!important;
box-shadow: none!important;
}
.mktoForm .mktoFormRow:nth-child(2) {
width: 49%;
float: left;
}
.mktoForm .mktoFormRow:nth-child(3) {
width: 49%;
float: left;
margin-left: 2%;
}
.mktoForm .mktoFormRow:nth-child(4) {
width: 49%;
float: left;
}
.mktoForm .mktoFormRow:nth-child(5) {
width: 49%;
float: left;
margin-left: 2%;
}
@media (max-width: 768px) {
.mktoForm .mktoFormRow {
clear: both !important;
}
.mktoForm .mktoFormRow:nth-child(2) {
width: 100%;
float: left;
}
.mktoForm .mktoFormRow:nth-child(3) {
width: 100%;
float: left;
margin-left: 0;
}
.mktoForm .mktoFormRow:nth-child(4) {
width: 100%;
float: left;
}
.mktoForm .mktoFormRow:nth-child(5) {
width: 100%;
float: left;
margin-left: 0;
}
}
mktoHtmlText.mktoHasWidth{
width:100%!important;
color:#323e48 !important;
font-size:16px!important;
}
.mktoForm .mktoFormRow:nth-child(9) {
width: 49%;
float: left;
margin-left: 2%;
margin:1em 0;
}
.mktoForm .mktoFormRow:nth-child(10) {
width: 49%;
float: left;
margin:1em 0;
}
.mktoForm .mktoFormRow:nth-child(11) {
width: 49%;
float: left;
margin-left: 2%;
margin:1em 0;
}
.mktoForm .mktoFormRow:nth-child(12) {
width: 49%;
float: left;
margin:1em 0;
}
.mktoForm .mktoFormRow:nth-child(8) .mktoLabel, .mktoForm .mktoFormRow:nth-child(9) .mktoLabel,
.mktoForm .mktoFormRow:nth-child(10) .mktoLabel, .mktoForm .mktoFormRow:nth-child(11) .mktoLabel, .mktoForm .mktoFormRow:nth-child(12) .mktoLabel {
margin-left:20px;
padding-top:0px!important;
}
.mktoCheckboxList input {
opacity: 0;
position: absolute;
}
.mktoCheckboxList input, .mktoCheckboxList label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.mktoCheckboxList label {
position: relative;
}
.mktoCheckboxList input + label:before {
content: '';
background: #fff;
border: 1px solid #323e48;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
padding: 2px;
margin-right: 10px;
text-align: center;
border-radius: .2em;
margin-top: 5px;
}
.mktoForm .mktoRadioList > label, .mktoForm .mktoCheckboxList > label{
margin-left:0!important;
}
.mktoCheckboxList input:checked + label:before{
background:#29abe2;
border:1px solid #29abe2;
}
.mktoLogicalField.mktoCheckboxList.mktoHasWidth{
width:20px!important;
}
.mktoCheckboxList input:checked + label:after {
content: "";
background: url('https://www.recastsoftware.com/wp-content/uploads/2021/02/Asset-1-1.svg');
color: #fff;
position: absolute;
top:10px;
left:5px;
padding:6px;
}
@media (max-width: 768px) {
.mktoForm .mktoFormRow:nth-child(8) {
width: 100%;
float: left;
}
.mktoForm .mktoFormRow:nth-child(9) {
width: 100%;
float: left;
margin-left: 0;
}
.mktoForm .mktoFormRow:nth-child(10) {
width: 100%;
float: left;
}
.mktoForm .mktoFormRow:nth-child(11) {
width: 100%;
float: left;
margin-left: 0;
}
.mktoForm .mktoFormRow:nth-child(12) {
width: 100%;
float: left;
}
}
.mktoButtonWrap.mktoSimple {
margin-left:0px!important;
}
.mktoForm input[type="text"], .mktoForm input[type="url"], .mktoForm input[type="email"], .mktoForm input[type="tel"], .mktoForm input[type="number"], .mktoForm input[type="date"], .mktoForm select.mktoField, .mktoForm textarea.mktoField {
height:50px;
}
.mktoHtmlText.mktoHasWidth, .mktoForm input[type="text"], .mktoForm input[type="url"], .mktoForm input[type="email"], .mktoForm input[type="tel"], .mktoForm input[type="number"], .mktoForm input[type="date"], .mktoForm select.mktoField, .mktoForm textarea.mktoField{
font-family: "Work Sans",sans-serif;
letter-spacing: .17px !important;
line-height: 1.42 !important; font-size:17px!important}
.mktoHtmlText.mktoHasWidth{width:100%!important;}