Bootstrap 5 button border color via css-CodePudding

i try to make a page to control my amp via various js libs.

1.) Can you tell how do i can change the blue border of a selected bootstrap 5 button? (to a lighter green instead of blue, i want to avoid scss to make it as simply as possible)

Showcase: https://schoko11.github.io/KEKO-WEB/#

Repo(sorry for the mess, it is not the newest version but the problems are visible): https://github.com/schoko11/KEKO-WEB

2.)When using this on a large screen you can see a white background on the bottom because the grey background does not stretch down the whole viewport height.... -> i set body to

height: 100vh;

Thanks!

CodePudding user response：

1.) From the document on this page, you can change blue border only via CSS or Sass (Scss). The blue border actually is box-shadow on :focus and/or :active pseudo class.

2.) You have to set full height for allcont class.

<!DOCTYPE html>
<html>

    <body>
        <div >
            <div >
                <button  type="button">
                    A Button
                </button>
            </div>
        </div>
    </body>

</html>

body {
    height: 100vh;
}


.allCont {
    background-color: rgba(0, 255, 0, .5); /* for test only */
    height: 100%;
}

.btn-check:focus   .btn-primary, 
.btn-primary:focus {
    box-shadow: 0 0 0 .25rem rgba(255,0,0,.5);
}
.btn-check:active   .btn-primary:focus, 
.btn-check:checked   .btn-primary:focus, 
.btn-primary.active:focus, 
.btn-primary:active:focus, 
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .25rem rgba(255,0,0,.5);
}

/* for test only */
.wrapper-for-test {
    padding: 50px;
}

See it in action