Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
gravityforms-bootstrap4
.btn > .caret, .gform_button > .caret,
.dropup > .btn > .caret,
.dropup > .gform_button > .caret {
border-top-color: #000 !important;
}
.gform_fields {
padding-left: 0;
list-style: none;
margin-left: -15px;
margin-right: -15px;
}
.gform_fields::after {
content: "";
display: table;
clear: both;
}
.form-control, .gform_fields input, .gform_fields select, .gform_fields textarea {
display: block;
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 1rem;
line-height: 1.25;
color: #55595c;
background-color: #fff;
background-image: none;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}
.gform_fields input::-ms-expand, .gform_fields select::-ms-expand, .gform_fields textarea::-ms-expand {
background-color: transparent;
border: 0;
}
.gform_fields input:focus, .gform_fields select:focus, .gform_fields textarea:focus {
color: #55595c;
background-color: #fff;
border-color: #66afe9;
outline: none;
}
.gform_fields input::-webkit-input-placeholder, .gform_fields select::-webkit-input-placeholder, .gform_fields textarea::-webkit-input-placeholder {
color: #999;
opacity: 1;
}
.gform_fields input::-moz-placeholder, .gform_fields select::-moz-placeholder, .gform_fields textarea::-moz-placeholder {
color: #999;
opacity: 1;
}
.gform_fields input:-ms-input-placeholder, .gform_fields select:-ms-input-placeholder, .gform_fields textarea:-ms-input-placeholder {
color: #999;
opacity: 1;
}
.gform_fields input::placeholder, .gform_fields select::placeholder, .gform_fields textarea::placeholder {
color: #999;
opacity: 1;
}
.gform_fields input:disabled, .gform_fields select:disabled, .gform_fields textarea:disabled, .gform_fields input[readonly], .gform_fields select[readonly], .gform_fields textarea[readonly] {
background-color: #eceeef;
opacity: 1;
}
.gform_fields input:disabled, .gform_fields select:disabled, .gform_fields textarea:disabled {
cursor: not-allowed;
}
.gform_fields select:not([size]):not([multiple]) {
height: 2.5rem;
}
.gform_fields select:focus::-ms-value {
color: #55595c;
background-color: #fff;
}
.gform_fields .input-group-sm > input.form-control-static, .gform_fields .input-group-sm > select.form-control-static, .gform_fields .input-group-sm > textarea.form-control-static,
.gform_fields .input-group-lg > input.form-control-static, .gform_fields .input-group-lg > select.form-control-static, .gform_fields .input-group-lg > textarea.form-control-static {
padding-right: 0;
padding-left: 0;
}
.gform_fields .input-group-sm > input, .gform_fields .input-group-sm > select, .gform_fields .input-group-sm > textarea {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
border-radius: 0.2rem;
}
.gform_fields .input-group-sm > select:not([size]):not([multiple]) {
height: 1.8125rem;
}
.gform_fields .input-group-lg > input, .gform_fields .input-group-lg > select, .gform_fields .input-group-lg > textarea {
padding: 0.75rem 1.5rem;
font-size: 1.25rem;
border-radius: 0.3rem;
}
.gform_fields .input-group-lg > select:not([size]):not([multiple]) {
height: 3.166667rem;
}
.gform_wrapper ul.gfield_radio li, .gform_wrapper ul.gfield_checkbox li {
position: relative;
display: block;
margin-bottom: 0.75rem;
}
.gform_wrapper ul.gfield_radio li + .form-check, .gform_wrapper ul.gfield_checkbox li + .form-check, .gform_wrapper ul.gfield_radio .form-check + li, .gform_wrapper ul.gfield_radio li + li, .gform_wrapper ul.gfield_checkbox .form-check + li, .gform_wrapper ul.gfield_checkbox li + li {
margin-top: -.25rem;
}
.gform_wrapper ul.gfield_radio li.disabled .form-check-label, .gform_wrapper ul.gfield_checkbox li.disabled .form-check-label {
color: #818a91;
cursor: not-allowed;
}
.gform_fields input, .gform_fields .has-success input, .has-success .gform_fields select, .gform_fields .has-success select, .has-success .gform_fields textarea, .gform_fields .has-success textarea {
border-color: #5cb85c;
}
.gform_fields input, .gform_fields .has-warning input, .has-warning .gform_fields select, .gform_fields .has-warning select, .has-warning .gform_fields textarea, .gform_fields .has-warning textarea {
border-color: #f0ad4e;
}
.gform_fields input, .gform_fields .has-danger input, .has-danger .gform_fields select, .gform_fields .has-danger select, .has-danger .gform_fields textarea, .gform_fields .has-danger textarea {
border-color: #d9534f;
}
.gform_button {
display: inline-block;
font-weight: normal;
line-height: 1.25;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 0.5rem 1rem;
font-size: 1rem;
border-radius: 0.25rem;
}
.gform_button:focus, .btn.focus, .focus.gform_button, .gform_button:active:focus .gform_button:active.focus, .active.gform_button:focus, .active.focus.gform_button {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.gform_button:focus, .gform_button:hover {
text-decoration: none;
}
.focus.gform_button {
text-decoration: none;
}
.gform_button:active, .active.gform_button {
background-image: none;
outline: 0;
}
.disabled.gform_button, .gform_button:disabled {
cursor: not-allowed;
opacity: .65;
}
a.btn.disabled, a.disabled.gform_button,
fieldset[disabled] a.btn,
fieldset[disabled] a.gform_button {
pointer-events: none;
}
gfield_description, .validation_error, .validation_message {
padding: 1rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}
.validation_message {
background-color: #dff0d8;
border-color: #d0e9c6;
color: #3c763d;
}
.validation_message hr {
border-top-color: #c1e2b3;
}
.validation_message .alert-link {
color: #2b542c;
}
.gform_fields textarea {
height: auto;
}
.gfield_required {
color: #a94442;
}
.gform_validation_container {
display: none;
}
.gfield_error .ginput_container {
margin-bottom: 10px;
}
@media (min-width: 544px) {
.form-inline .gform_fields input, .gform_fields .form-inline input, .form-inline .gform_fields select, .gform_fields .form-inline select, .form-inline .gform_fields textarea, .gform_fields .form-inline textarea {
display: inline-block;
width: auto;
vertical-align: middle;
}
.form-inline .input-group .gform_fields input, .gform_fields
.form-inline .input-group input,
.form-inline .input-group .gform_fields select, .gform_fields
.form-inline .input-group select,
.form-inline .input-group .gform_fields textarea, .gform_fields
.form-inline .input-group textarea {
width: auto;
}
.form-inline .input-group > .form-control, .form-inline .gform_fields .input-group > input, .gform_fields .form-inline .input-group > input, .form-inline .gform_fields .input-group > select, .gform_fields .form-inline .input-group > select, .form-inline .gform_fields .input-group > textarea, .gform_fields .form-inline .input-group > textarea {
width: 100%;
}
.gform_wrapper ul.gfield_radio li, .gform_wrapper ul.gfield_radio .form-inline li, .form-inline .gform_wrapper ul.gfield_checkbox li, .gform_wrapper ul.gfield_checkbox .form-inline li {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
}
@brohlson

This comment has been minimized.

Copy link

brohlson commented Nov 17, 2017

Thank you for this! Such a time saver. Few notes:

  • Alert styles will probably need to be altered on a case by case basis
  • Input heights should be set/debugged for each browser.

Cheers!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.