Stop the propagation of an outline? CSS

Question

I'm trying to add a search box that has an outline animation, this one I

form {
  display:block;
  left:50%;
  position:absolute;
  top:30%;
  input[type=search] {
    border:solid 3px #fff;
    box-sizing:border-box;
    font-size:2em;
    height:2em;
    margin-left:-15vw;
    outline:solid #fc0 0;
    padding:.5em;
    transition:all 2s ease-in;
    width:30vw;
    z-index:1;
    &:focus {
      border:solid 3px #09f;      
      outline:solid #fc0 2000px;
    }
  }

In specific and what this does is create a form where as the input produces a 2000px massive outline throughout the body - my question is: Is it possible to have a wrapping div around this form and have some sort of command to stop the propagation of the outline? In order to have the outline only manifest itself inside of the containing div and not to the whole page.

If the solution is not available in CSS, I'm open to JS ones, aswell.

Thanks in advance!

Answer 1

I've inserted input into a div, which has overflow: hidden css property, which stops outline from showing.

Here is working codepen

SASS

$shadow: #fc0;

html {
  background-color:#ccc;
}

#outlineBorder {
  width: 800px;
  height: 200px;
  display:flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

form {

  input[type=search] {
    border:solid 3px #fff;
    box-sizing:border-box;
    font-size:2em;
    height:2em;
    outline:solid #fc0 0;
    padding:.5em;
    transition:all 2s ease-in;
    width:30vw;
    z-index:1;
    &:focus {
      border:solid 3px #09f;      
      outline:solid #fc0 2000px;
    }
  }
  
}

HTML

<form>
    <div id="outlineBorder">
      <input type="search" placeholder="Search...">
    </div>
</form>