Остановить распространение контура? CSS

Question

Я пытаюсь добавить поле поиска с контурной анимацией, это 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;
    }
  }

В частности c и что это создает форма, где в качестве входных данных создается массивный контур размером 2000 пикселей по всему телу - мой вопрос: можно ли иметь обертывающий div вокруг этой формы и иметь какую-то команду, чтобы остановить распространение контура? Чтобы контур проявлялся только внутри содержащего его div, а не для всей страницы.

Если решение недоступно в CSS, я также открыт для JS.

Заранее спасибо!

Answer 1

Я вставил ввод в div, у которого есть свойство overflow: hidden css, которое останавливает отображение контура.

Вот рабочий код

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>