Remove after clicking Border of input field of bootstrap using css-CodePudding

i want to remove border or outline came when we click to enter something of my searchbar made using bootstrap 4. enter image description here

.search-icon{
    border-radius: 0;
    background: transparent;
    color: black;
}
.search-icon:hover{
    border-radius: 0;
    background: transparent;
    color: var(--main-bg-color);
    resize: none;
    outline: none;
}

<!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-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev nYRRuWlolflfl" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/utils.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Blog</title>
</head>
<body>
    <nav >
        <div  style="color:black;">
          <a  href="#">NicoDrip</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
          </button>
          <div  id="navbarScroll">
            <ul  style="--bs-scroll-height: 100px;">
              <li >
                <a  aria-current="page" href="#">Home</a>
              </li>
              <li >
                <a  href="#">About Us</a>
              </li>
              <li >
                <a  href="#">Download</a>
              </li>
            </ul>
            <form >
              <input  type="search" placeholder="Search" aria-label="Search">
              <button  type="submit"><i ></i></button>
            </form>
          </div>
        </div>
      </nav>
      <hr>    
<div>

i used this code of html and css to overwrite bootstrap but it only remove simple border i want to remove border/outline come after clicking on search field pls help me if you know how to do it

CodePudding user response：

.no-border {
    outline: none;
    -webkit-appearance: none;
    box-shadow: none !important;
}

Add this no-border class to your input field.

CodePudding user response：

        .form-controli {
            display: block;
            width: 100%;
            padding: .375rem .75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #212529;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border-radius: .25rem;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        }
        .form-controli:focus{
            outline: none;
        }

<form >
  <input  type="search" placeholder="Search" aria-label="Search">
  <button  type="submit"><i ></i></button>
</form>

Add (.form-controli) class in style tag also replace (.form-control) to (.form-controli) from form div.