<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.