<!-- nosimple -->
<div x-data="{
val: 'Second', 
items: ['First', 'Second', 'Third'],
show: false
}" 
class="w200px pos-relative b-inline">
    
    <input x-model="val" type="hidden" name="mySelect">
    
    <div 
    @click="show = true" 
    @keydown.enter="show = !show" 
    tabindex="10" 
    class="hover-t-blue700 pos-relative bordered rounded5 transition-var">
        
        <div x-text="val" class="pad10-rl pad3-tb"></div>
        <div :class="{'t-blue bg-blue100': show}" class="rounded5-r pos-absolute pos0-t pos0-r pad5-rl h100 lh200 cursor-pointer">▼</div>
    </div>
    
    <div x-show="show" x-cloak>
        <div 
        @click.away="show = false" 
        :class="{'bor-blue': show}" 
        class="mar5-t bordered pos-absolute w200px z-index1 bg-white cursor-pointer">
            
            <template x-for="item in items">
                <div 
                @click="val = item; show = false" 
                :class="{'t-white bg-blue600': val == item}" 
                x-text="item" 
                class="hover-bg-blue700 hover-t-white pad10-rl lh200">
                </div>
            </template>
            
        </div>
    </div>
</div>
<!-- /nosimple -->