No value
<style>
.custom-dropdown {
    width: 200px;
    position: relative;
    font-family: Arial, sans-serif;
}
.current-option {
    height: 30px;
    line-height: 30px;
    border: 1px solid #ccc;
    padding: 0 10px;
    cursor: pointer;
}
.options-container {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: #fff;
    display: none;
    z-index: 100;
}
.option {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    cursor: pointer;
}
.option:hover {
    background: #f0f0f0;
}
</style>
ddwfff
<form action="/sandbox/index.php" method="POST">
    <select name="select" id="select">
        <option value="1">W1</option>
        <option value="2">W2</option>
        <option value="3">W3</option>
        <option value="4">W4</option>
        <option value="5">W5</option>
        <option value="6">W6</option>
        <option value="7">W7</option>
    </select>
    <input type="submit" value="Submit">
</form>

<script>
function convert_select(id) {
    const html_select = document.getElementById(id);
    if (!html_select) return;
    
    html_select.style.display = 'none';
    
    const custom_dropdown = document.createElement('div');
    custom_dropdown.className = 'custom-dropdown';
    
    const current_option = document.createElement('div');
    current_option.className = 'current-option';
    current_option.textContent = html_select.options[html_select.selectedIndex].text;
    custom_dropdown.appendChild(current_option);

    let chevron = document.createElement('span');
    chevron.textContent = '▼';
    chevron.style.float = 'right';
    current_option.appendChild(chevron);
    
    const options_container = document.createElement('div');
    options_container.className = 'options-container';
    // Setze inline den Startwert
    options_container.style.display = 'none';
    
    Array.from(html_select.options).forEach(option => {
        const option_div = document.createElement('div');
        option_div.className = 'option';
        option_div.textContent = option.text;
        option_div.addEventListener('click', function() {
            current_option.textContent = option.text;
            chevron.textContent = '▼';
            current_option.appendChild(chevron);
            html_select.value = option.value;
            options_container.style.display = 'none';
        });
        options_container.appendChild(option_div);
    });
    custom_dropdown.appendChild(options_container);
    
    current_option.addEventListener('click', function() {
        // Nutze getComputedStyle, um den aktuellen Wert zu ermitteln
        let display = window.getComputedStyle(options_container).display;
        options_container.style.display = (display === 'none') ? 'block' : 'none';

        // rotate chevron
        chevron.textContent = (display === 'none') ? '▲' : '▼';
    });
    
    html_select.parentElement.appendChild(custom_dropdown);
}


convert_select('select');
</script>