<form action="#">
  <input class="searchInp" type="text" placeholder="type something">
  <input class="searchBtn" type="submit" value="Search">
</form>
body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-rendering: optimizeSpeed;
  height: 100vh;
}
form {
  --default-color: #999;
  --activate-color: skyblue;
  display: flex;
  width: 300px;
  height: 30px;
}
.searchInp {
  border-width: 1px;
  border-color: var(--default-color);
  border-style: solid;
  border-right: none;
  outline: none;
  transition: border-color 500ms;
}
.searchBtn {
  border: none;
  cursor: not-allowed;
  background-color: var(--default-color);
  transition: background-color 500ms;
}
.searchInp:not(:placeholder-shown) {
  border-color: var(--activate-color);
}
.searchInp:not(:placeholder-shown) + .searchBtn {
  background-color: var(--activate-color);
  cursor: pointer;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.