How to remove bootstrap's outline in form-control class?-CodePudding

My html file

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <link rel="stylesheet" href="style.css">
        <title>homepage</title>

    </head>

    <body>
        <nav >
            <div >
                <a  href="#">Navbar</a>
                <button  type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span ></span>
                </button>
                <div  id="navbarSupportedContent">
                    <ul >
                        <li >
                            <a  aria-current="page" href="#">Home</a>
                        </li>
                        <li >
                            <a  href="#">Link</a>
                        </li>
                        <li >
                            <a  href="#" id="navbarDropdown" role="button"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                Dropdown
                            </a>
                            <ul  aria-labelledby="navbarDropdown">
                                <li><a  href="#">Action</a></li>
                                <li><a  href="#">Another action</a></li>
                                <li>
                                    <hr >
                                </li>
                                <li><a  href="#">Something else here</a></li>
                            </ul>
                        </li>
                        <li >
                            <a >Disabled</a>
                        </li>
                    </ul>
                    <form >
                        <input  type="search" placeholder="Search" aria-label="Search">
                        <button  type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p"
            crossorigin="anonymous"></script>

    </body>

</html>

I am using boostrap navbar,to design the template normally for my practice as i am new to bootstrap, i have recently learned css,but i got one problem that is,i am not able to remove bootstrap's outline, by the following css i have done for it.

My css file

input.form-control {
  outline: none;
}

How can i do it?

CodePudding user response：

That's the box shadow, which you are saying outline.

set the following css:

.navbar .form-control:focus {
  box-shadow: none !important;
}

It may solve the problem.

CodePudding user response：

Use inline style on the element u are targeting it overides all the external style For example

<input  style="outline:none;box-shadow:none;" >