Hey Guys,
Just a quick one regarding form elements and the current is-valid (green/success) and is-invalid (red / danger) states (with the attached invalid-feedback child div).
Sometimes its neither right or wrong, for example, a warning or 'info'/'notice' information.
In my specific case, I wanted the input field to turn orange just to give the user a heads up and made 'is-warning' and 'warning-feedback' classes (copy/paste of existing classes and just changed colours) to achieve the desired output.
You may want to take things further though and implement things like is-primary / is-info / etc.
My example code:/*begin: is-warning, duplicate is-invalid with colour change / name change*/
.warning-feedback {
display: none;
width: 100%;
margin-top: 0.5rem;
font-size: 0.95rem;
color: var(--bs-warning-text);
}
.warning-tooltip {
position: absolute;
top: 100%;
z-index: 5;
display: none;
max-width: 100%;
padding: 0.75rem 1rem;
margin-top: 0.1rem;
font-size: 1rem;
color: #fff;
background-color: var(--bs-warning);
border-radius: 0.475rem;
}
.was-validated :invalid ~ .warning-feedback,
.was-validated :invalid ~ .warning-tooltip,
.is-warning ~ .warning-feedback,
.is-warning ~ .warning-tooltip {
display: block;
}
.was-validated .form-control:invalid, .form-control.is-warning {
border-color: var(--bs-warning);
padding-right: calc(1.5em + 1.55rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ffc700'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ffc700' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.3875rem) center;
background-size: calc(0.75em + 0.775rem) calc(0.75em + 0.775rem);
}
.was-validated .form-control:invalid:focus, .form-control.is-warning:focus {
border-color: var(--bs-warning);
box-shadow: 0 0 0 0.25rem rgba(var(--bs-warning-rgb), 0.25);
}
.was-validated textarea.form-control:invalid, textarea.form-control.is-warning {
padding-right: calc(1.5em + 1.55rem);
background-position: top calc(0.375em + 0.3875rem) right calc(0.375em + 0.3875rem);
}
.was-validated .form-select:invalid, .form-select.is-warning {
border-color: var(--bs-warning);
}
.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-warning:not([multiple]):not([size]), .form-select.is-warning:not([multiple])[size="1"] {
--bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ffc700'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ffc700' stroke='none'/%3e%3c/svg%3e");
padding-right: 5.5rem;
background-position: right 1rem center, center right 3rem;
background-size: 16px 12px, calc(0.75em + 0.775rem) calc(0.75em + 0.775rem);
}
.was-validated .form-select:invalid:focus, .form-select.is-warning:focus {
border-color: var(--bs-warning);
box-shadow: 0 0 0 0.25rem rgba(var(--bs-warning-rgb), 0.25);
}
.was-validated .form-control-color:invalid, .form-control-color.is-warning {
width: calc(3rem + calc(1.5em + 1.55rem));
}
.was-validated .form-check-input:invalid, .form-check-input.is-warning {
border-color: var(--bs-warning);
}
.was-validated .form-check-input:invalid:checked, .form-check-input.is-warning:checked {
background-color: var(--bs-warning-text);
}
.was-validated .form-check-input:invalid:focus, .form-check-input.is-warning:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-warning-rgb), 0.25);
}
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-warning ~ .form-check-label {
color: var(--bs-warning-text);
}
.form-check-inline .form-check-input ~ .warning-feedback {
margin-left: 0.5em;
}
.was-validated .input-group > .form-control:not(:focus):invalid, .input-group > .form-control:not(:focus).is-warning,
.was-validated .input-group > .form-select:not(:focus):invalid,
.input-group > .form-select:not(:focus).is-warning,
.was-validated .input-group > .form-floating:not(:focus-within):invalid,
.input-group > .form-floating:not(:focus-within).is-warning {
z-index: 4;
}
/*end: is-warning*/
Hi,
Thank you for sharing this. We will check this further and consider implementing it.
Probably Bootstrap has core mixing to add custom states easily.
Regards.