Question
Help changing checkbox colour when clicked Marketo CSS form
Need help changing the checkbox colour when clicked with embedded Marketo form on our landing page. Current it is green (old brand), and I need it to remain white, until clicked then #AC88FF purple
Here's the current code:
/* Add your custom CSS below */
a {
color: #A2A1A1 !important;
}
@media screen and (min-width:1px) {
/* Begin Fluid Marketo Forms CSS | paste this into the Custom CSS input */
/* hide these elements */
form.mktoForm .mktoOffset,
form.mktoForm .mktoGutter {
display:none !important;
}
/* form element */
form.mktoForm {padding:20px; box-sizing:border-box;}
/* all form child elements */
form.mktoForm * {font-size: inherit !important; box-sizing:border-box;}
/* make these elements fluid (override fixed widths) */
form.mktoForm,
form.mktoForm .mktoFormRow,
form.mktoForm .mktoButtonRow,
form.mktoForm .mktoFormCol,
form.mktoForm .mktoFieldWrap,
form.mktoForm label.mktoLabel,
form.mktoForm input[type=url],
form.mktoForm input[type=text],
form.mktoForm input[type=date],
form.mktoForm input[type=tel],
form.mktoForm input[type=email],
form.mktoForm input[type=number],
form.mktoForm textarea.mktoField,
form.mktoForm select.mktoField,
form.mktoForm .mktoLogicalField {
width: 100% !important;
}
/* labels */
form.mktoForm label.mktoLabel {
padding-bottom: .5em !important;
font-weight: bold;
}
/* required asterix */
form.mktoForm .mktoAsterix {
float: left !important;
margin-left: -1em !important;
}
/* inputs */
form.mktoForm input[type=url],
form.mktoForm input[type=text],
form.mktoForm input[type=date],
form.mktoForm input[type=tel],
form.mktoForm input[type=email],
form.mktoForm input[type=number],
form.mktoForm textarea.mktoField,
form.mktoForm select.mktoField {
padding: .5em .75em !important;
min-height: 2.5em; /* set input heights */
height: auto !important; /* override */
}
/* checkbox & radio labels */
form.mktoForm .mktoCheckboxList,
form.mktoForm .mktoRadioList {
box-sizing: border-box;
width: 100% !important;
padding: 0 !important;
color: 000 !important;
width:auto !important;
float:left !important;
clear:none !important;
}
form.mktoForm .mktoRadioList label[for],
form.mktoForm .mktoCheckboxList label[for] {
width:100% !important;
margin: 0px !important;
padding: 0 0 .5em 1.75em;
color: 000 !important;
width:auto !important;
float:left !important;
clear:none !important;
}
/* checkbox & radio inputs */
form.mktoForm input[type=checkbox],
form.mktoForm input[type=radio] {
height:1.25em !important;
width:1.25em !important;
text-align: left !important;
color: 000 !important;
}
/* button */
form.mktoForm .mktoButtonWrap {
margin-left: 0 !important; /* override */
width: 100% !important;
color: #611EEC !important;
display: block !important;
text-align: center !important; /* center button */
padding-top: 10px; /* optional space above the button */
}
form.mktoForm button.mktoButton {
display: inline-block !important;
background: #611EEC !important; /* button bg color */
color: #fff !important; /* button text color */
border:2px solid transparent !important; /* button border color */
padding: .5em 2.75em;
font-size:1.2em !important;
line-height:1.2em !important;
}
form.mktoForm button.mktoButton:hover {
background: #AC08FF !important; /* button bg color on hover */
color: #fff !important; /* button text color on hover */
border-color: #AC08FF !important; /* button border color on hover */
}
} /* end 1px+ (mobile) styles */
/* RESPONSIVE STYLES */
@media screen and (min-width:480px) {
form.mktoForm.mktoLayoutLeft label.mktoLabel {
width:30% !important; /* set label width for labels-left setup */
}
form.mktoForm.mktoLayoutLeft input[type=url],
form.mktoForm.mktoLayoutLeft input[type=text],
form.mktoForm.mktoLayoutLeft input[type=date],
form.mktoForm.mktoLayoutLeft input[type=tel],
form.mktoForm.mktoLayoutLeft input[type=email],
form.mktoForm.mktoLayoutLeft input[type=number],
form.mktoForm.mktoLayoutLeft textarea.mktoField,
form.mktoForm.mktoLayoutLeft select.mktoField,
form.mktoForm.mktoLayoutLeft .mktoCheckboxList,
form.mktoForm.mktoLayoutLeft .mktoRadioList {
width: 70% !important; /* set input width for labels-left setup */
}
} /* end @ 768+ */