Creates an input with a visual, non-editable prefix.
display: flex
to create a container element.<input>
field. Apply them to the parent element instead to make it look like an input box.:focus-within
pseudo-class selector to style the parent element accordingly, when the user interacts with the <input>
field.<div class="input-box">
<span class="prefix">+30</span>
<input type="tel" placeholder="210 123 4567"/>
</div>
.input-box {
display: flex;
align-items: center;
max-width: 300px;
background: #fff;
border: 1px solid #a0a0a0;
border-radius: 4px;
padding-left: 0.5rem;
overflow: hidden;
font-family: sans-serif;
}
.input-box .prefix {
font-weight: 300;
font-size: 14px;
color: #999;
}
.input-box input {
flex-grow: 1;
font-size: 14px;
background: #fff;
border: none;
outline: none;
padding: 0.5rem;
}
.input-box:focus-within {
border-color: #777;
}
Would you like to help us improve 30 seconds of code?Take a quick survey
CSS, Interactivity
Creates a horizontally scrollable container that will snap on elements when scrolling.
CSS, Interactivity
Creates a scrollable container that will snap on elements when scrolling.
CSS, Visual
Creates a horizontally scrollable image gallery.