具有optgroup样式的HTML select

Question

我需要使用屏幕快照中随附的选项来框选。

这是添加的代码，但是有些CSS无法正确应用。有人可以帮助我吗。

这是CSS

<style>
    optgroup{
        margin: 1em
        color: gray
        font-size: 1.2em
        height: 1.55rem
        line-height: 1.3rem
        padding-top: 1.25rem
        padding-bottom: 2.25rem
        width: 57rem
    }
    optgroup option{
        margin: 1em
        color: gray
        font-size: 1.2em
        height: 1.55rem
        line-height: 1.3rem
        padding-top: 0.25rem
        width: 57rem
    }

    .optgroup.option.span.account-details{
        display: flex
        padding: 03px
    }

    optgroup.option.span.description{
        font-weight: bold
    }

    optgroup.option.span.balanceAmount{
        font-size: 1.6rem
        margin-left: auto
    }

.amount-container {
    height: 1.6rem
    margin-top: 3rem
    width: 80rem
}

</style>

这是HTML

<select class='amount-container'>
    <optgroup class="amount-label" label='Consumer Accounts'>
        <option>
            <span class="description">Chase Bank</span>
            <span>X1234</span>
            <span class="balanceAmount">$230</span>
        </option>
        <option>
            <div>Bank Of America</div>
            <div>X1234</div>
            <div>$230</div>
        </option>
    </optgroup>
    <optgroup class='amount-label' label='External Accounts'>
        <option>
            <span class="description">Key Bank</span>
            <span>X1244</span>
            <span class="balanceAmount">$730</span>
        </option>
    </optgroup>
</select>