Dragon-Knight/assets/scripts/select_arrows.js

27 lines
1.1 KiB
JavaScript

function addSelectArrows() {
const selects = document.querySelectorAll('select.styled-select')
selects.forEach(select => {
if (select.parentElement.classList.contains('select-wrapper')) return
select.style.paddingRight = '1.5rem'
const wrapper = document.createElement('div')
wrapper.className = 'select-wrapper'
wrapper.style.position = 'relative'
wrapper.style.display = 'inline-block'
select.parentNode.insertBefore(wrapper, select)
wrapper.appendChild(select)
const arrow = document.createElement('div')
arrow.innerHTML = `<svg width="16px" height="16px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 13.5L15.5 17L12 13.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.5 17V11C15.5 8.79086 13.7091 7 11.5 7H4.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>`
arrow.style.position = 'absolute'
arrow.style.right = '5px'
arrow.style.top = '56%'
arrow.style.transform = 'translateY(-50%)'
arrow.style.pointerEvents = 'none'
wrapper.appendChild(arrow)
})
}