CODEWITHSUNDEEP
cssbootstrap-5
Mekong
Mekong

Reputation: 449

Bootstrap 5 - How to overide default colours

I'm using Bootstrap 5 (5.2.1) with a form.

I'm trying to override the default form validation styles. In particular, the coloured 'tick' (or 'check') icon that appears when a form field is correctly completed/validated.

The Developer Tools panel shows the relevant code which controls the presentation of the validated form (see below). But, this is generated by a _forms.scss file, which doesn't seem to exist in the files/folders downloaded from Bootstrap.

Anyhow, I haven't ever used .scss

Wondering if there is any easy way to change default colours in Bootstrap 5 (including the SVG icon referenced in the CSS below) - without using SCSS?

.form-control.is-valid, .was-validated .form-control:valid {
    border-color: #198754;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' 
    viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 
    1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

P.S.

I added the above code to my custom.css file, with changed colours, but this didn't work.

Upvotes: 0

Views: 592

Answers (1)

Innovin
Innovin

Reputation: 830

This is due to CSS specificity. How to go about this would be this way:

First off all, assign an id to your body tag eg <body id='override'>

Now in your custom.css, just change it to this:

#override .form-control.is-valid, #override .was-validated .form-control:valid {
    border-color: #198754;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' 
    viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 
    1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

UPDATE: Decoding the URL:

#override .form-control.is-valid, #override .was-validated .form-control:valid {
    border-color: #198754;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url(data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' 
    viewBox='0 0 8 8'><path fill='#198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 
    1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

Upvotes: 1

Related Questions