Prefix Input Group
A website input with a monospace https:// prefix attached to the field.
Preview and code
index.html
<div class='ig'><label for='ig1'>Website</label><div class='ig-g'><span>https://</span><input id='ig1' type='text' placeholder='yourdomain.com'></div><p>Include the path after your domain.</p></div>
styles.css
.ig{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.ig label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.ig-g{display:flex;height:40px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.ig-g:focus-within{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.ig-g span{display:grid;place-items:center;padding:0 12px;background:#fafafa;border-right:1px solid #e5e5e5;font:13.5px ui-monospace,Menlo,monospace;color:#404040}.ig-g input{flex:1;min-width:0;border:0;outline:0;padding:0 12px;font:inherit;font-size:14px;background:transparent}.ig-g input::placeholder{color:#a3a3a3}.ig p{margin:8px 0 0;font-size:12.5px;color:#737373}About
An input group joining a muted prefix addon to a text field inside one rounded border, with a focus ring around the whole group.