select

原生下拉框的样式修改是实验型功能

没有 option[selected] 时自动选中第一个 

select.na-select(style="width:180px")
    option(value="genshin") 原神
    option(value="hsr") 崩坏：星穹铁道
    option(value="zzz") 绝区零

未预设 select::picker-icon 伪元素图标，原因见 自定义样式

## data-primary

select.na-select[data-primary] 这个属性需要启用后才可以继承主题和拥有某些局部样式，或置于 na-input-wrapper[data-primary] 中

局部变量 --color-select 可以直接设置主题颜色RGB值， 这优先于 --color-input*-wrapper 

select.na-select(data-primary="success" style="width:180px")
    option(value="genshin") 原神
    option(value="hsr") 崩坏：星穹铁道
    option(value="zzz") 绝区零

但会被 select.na-select>option[data-primary] 的效果覆盖 

select.na-select(data-primary style="width:180px")
    option(value="genshin") 原神
    option(value="hsr") 崩坏：星穹铁道
    option(value="zzz" data-primary="success") 绝区零

## disabled 

select.na-select(disabled style="width:180px")
    option(value="genshin") 原神
    option(value="hsr") 崩坏：星穹铁道
    option(value="zzz" selected) 绝区零

## .sm & .lg

全局变量控制内边距，数值和预设都与 input.na-input 一致

有下面两个预设尺寸：

## custom style

自定义图标很容易，不需要覆盖 select::picker-icon，直接使用 select>button:first-of-type 来狸猫换太子，这便于利用到 svg>symbol 节省文档渲染 

label.na-form-item
    span 故障机型
    .na-input-wrapper(data-primary)
        select.na-select(name="type" style="width:180px")
            button
                selectedcontent
                svg(
                    data-icon='direction/outline/down'
                    width=16
                    height=16
                    style="color:rgb(var(--gray-6))"
                )
            optgroup(label="iPhone")
                option(value="") iphone 16
                option(value="pro") iphone 16 pro
                option(value="se" data-primary="danger" selected) iphone 16e
            optgroup(label="iPad")
                option(value="mini" data-primary="warning") ipad mini 7 pro
                option(value="air") ipad air 13
                option(value="pro") ipad pro 13