SOURCE

$(function(){
  $('#search').focus(function(){
    #('#frame').css('backgroundColor', 'black');
  });
  
});

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
<div class="search">
    <div class="btn-group">
        <input type="text" placeholder="请输入名称" name="crid">
        <button type="button" id=“search” onclick="test()"></button>
    </div>
</div>
<iframe id="frame"></iframe>

* {
	box-sizing:border-box;
}
body {
	margin:0;
	padding:0;
	font-weight:500;
	font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;
}
iframe{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color: gray;
  width: 100%;
  height: 100%;
  z-index: 0;
  display:block;
}
div.search {
	padding:10px 0;
  margin-top: 30%;
}
div.search div.btn-group {
	position:relative;
	width:300px;
	margin:0 auto;
  height:42px;
  z-index:1;
}
div.search div.btn-group input,div.search div.btn-group button {
	border:none;
	outline:none;
}
div.search div.btn-group input {
	height:42px;
	padding-left:13px;
  width:200px;
	border-radius:42px;
	border:2px solid #324B4E;
	background:#F9F0DA;
	transition:.3s linear;
	float:right;
}
div.search div.btn-group button {
	height:42px;
	width:42px;
	cursor:pointer;
	position:absolute;
  background:none;
	top:-2px;
	right:20px;
}
div.search div.btn-group input:focus {
	width:300px;
}
div.search div.btn-group button:before {
	content:"Go";
	font-family:FontAwesome;
	color:#324b4e;
}