Form fields

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.

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;
}
Copy to clipboard