This snippet will change the appearance of all form fields across the website.
Note: This will not overwrite form fields customized through the editor, in for an example the combined 'Jumbotron and Form field' -module.
Form fields
1) Form field container (background)
2) Form title - Headline (color, font size)
3) Personal message - Paragraph (color)
4) Form labels (color, font size)
5) Input fields (background, color)
6) Submit buttons (background, color)
7) Submit buttons - Hover (background, color)
8) Error message (border, color, font size, background, text shadow)
9) Text color to radio button and checkboxes (color)
/* Form fields */
/* 1) Form Container Background color */
.formbuilder{
background-color: #a02158;
}
/* 2) Form title */
.formbuilder .h2{
color: #fff;
font-size:31px;
}
/* 3) Personal message */
.formbuilder p{
color: #d2709a;
}
/* 4) Form labels */
.formbuilder label,
.error{
font-size:17px;
color: #ffffff;
}
/* 5) Input fields */
.formbuilder input[type='text'],
.formbuilder input[type='email'],
.formbuilder textarea,
.formbuilder input[type='checkbox'] +span:before,
.formbuilder input[type='radio'] +span:before{
background-color: #fff;
color: #444444;
}
/* 6) Submit Buttons */
.formbuilder input[type='submit'],
.formbuilder button[type='submit']{
background-color: #000;
color: #fff;
}
/* 7) Submit buttons on hover */
input[type='submit']:hover,
button[type='submit']:hover{
background-color: #282828;
color:#eae31f;
}
/* 8) Error message */
.alert-error{
border:2px dashed #fff;
color: #eae31f;
font-size:15px;
background-color: #e33157;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
/* 9) Text color to radio button and checkboxes */
.formbuilder input[type='checkbox'] +span,
.formbuilder input[type='radio'] +span{
color:#fff;
}