<div>
<input>
<button>검색</button>
</div>
div:focus-within {
outline: 2px solid red;
}
div {
background: white;
border-radius: 24px;
padding: 8px;
}
input {
font-size: 1.2rem;
padding-inline: 0.5em;
border: none;
outline: none;
}
button {
font-size: 1.2rem;
font-weight: bold;
background: red;
color: white;
padding-inline: 1em;
padding-block: 0.5em;
border-radius: 1em;
border: none;
}
body {
background: mistyrose;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.