Styled Select Field
A native select restyled with a custom chevron, label and helper text.
Preview and code
index.html
<div class='sl'><label for='sl1'>Country</label><div class='sl-w'><select id='sl1'><option value='' selected disabled>Select an option</option><option>United States</option><option>Canada</option><option>United Kingdom</option><option>India</option><option>Australia</option></select><svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg></div><p>Shipping rates vary by region.</p></div>
styles.css
.sl{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.sl label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.sl-w{position:relative}.sl select{width:100%;box-sizing:border-box;height:40px;padding:0 38px 0 14px;font:inherit;font-size:14px;color:#111;background:#fff;border:1px solid #e5e5e5;border-radius:10px;outline:0;cursor:pointer;-webkit-appearance:none;appearance:none;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.sl select:invalid,.sl select:has(option[disabled]:checked){color:#a3a3a3}.sl select:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.sl-w svg{position:absolute;right:12px;top:12px;color:#737373;pointer-events:none}.sl p{margin:8px 0 0;font-size:12.5px;color:#737373}About
A real select element with appearance removed and a drawn chevron, so it keeps native mobile pickers and keyboard behaviour.