FormSelect.module.scss
22 lines
| 1 | input.formSelect { |
| 2 | position: relative; |
| 3 | background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 9 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.80573 5.9375C1.24713 5.9375 0.967834 6.59766 1.37408 6.97852L4.39557 10C4.62408 10.2539 5.00494 10.2539 5.25885 10L8.28033 6.97852C8.66119 6.59766 8.3819 5.9375 7.84869 5.9375H1.80573ZM8.28033 3.27148L5.25885 0.25C5.00494 0.0214844 4.62408 0.0214844 4.39557 0.25L1.37408 3.27148C0.967834 3.67773 1.24713 4.3125 1.80573 4.3125H7.84869C8.3819 4.3125 8.66119 3.67773 8.28033 3.27148Z' fill='%23333333'/%3E%3C/svg%3E"); |
| 4 | background-size: 0.5625rem 0.6875rem; |
| 5 | background-repeat: no-repeat; |
| 6 | background-position: calc(100% - 0.3125rem) center; |
| 7 | inline-size: 14rem; |
| 8 | |
| 9 | &::-webkit-list-button, &::-webkit-calendar-picker-indicator { |
| 10 | // hide the native datalist arrow but allow it to take pointer events |
| 11 | opacity: 0; |
| 12 | position: absolute; |
| 13 | right: 0; |
| 14 | cursor: pointer; |
| 15 | } |
| 16 | |
| 17 | &::-webkit-search-cancel-button { |
| 18 | position: absolute; |
| 19 | right: 0.875rem; |
| 20 | } |
| 21 | } |
| 22 |