/* Make native select look like your inputs WITHOUT overriding .text-field */
.text-field.w-select.is-select{
/* keep all visuals from .text-field; just reset the native UI + add arrow */
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
/* space for the arrow on the right */
padding-right: 2.5rem; /* adjust if your input has different x-padding */
/* arrow that follows current text color */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .75rem center;
background-size: 1rem;
}
/* Hide old Edge/IE arrow */
.text-field.w-select.is-select::-ms-expand { display:none; }
Get in touch
If you have a project or want to talk about a technical solutions, please get in touch – we'd love to chat!
contact@blockydevs.com
Thank you! Your form has been successfully sent!
Oops! Something went wrong while submitting the form.
