将单选按钮更改为下拉菜单

Question

我正在尝试使用CSS将单选按钮更改为下拉菜单。 该网站是基于wordpress构建的，但是是否可以仅使用CSS将单选按钮更改为下拉菜单，还是需要在某个地方添加JavaScript？

因此，我的最终目标是将“交付”单选按钮更改为下拉菜单。 他们有自己的班级。

当我搜索时，它会继续返回此代码。 我在这里错过了什么吗？还是我应该忘记下拉菜单？

<div class="wcsatt-options-wrapper" <?php echo count( $options ) === 1 ? 'style="display:none;"' : '' ?>><?php

if ( $prompt ) {
    echo $prompt;
} else {
    ?><h3><?php
        _e( 'Choose a subscription plan:', 'woocommerce-subscribe-all-the-things' );
    ?></h3><?php
}

?><ul class="wcsatt-options-product"><?php
    foreach ( $options as $option ) {
        ?><li class="<?php echo esc_attr( $option[ 'class' ] ); ?>">
            <label>
                <input type="radio" name="convert_to_sub_<?php echo absint( $product_id ); ?>" data-custom_data="<?php echo esc_attr( json_encode( $option[ 'data' ] ) ); ?>" value="<?php echo esc_attr( $option[ 'value' ] ); ?>" <?php checked( $option[ 'selected' ], true, true ); ?> />
                <?php echo '<span class="' . esc_attr( $option[ 'class' ] ) . '-details">' . $option[ 'description' ] . '</span>'; ?>
            </label>
        </li><?php
    }
?></ul>

Answer 1

尝试用以下代码替换“ ul”标签。

<select class="anyting-you-wish" name="convert_to_sub_<?php echo absint( $product_id ); ?>">
    <?php foreach ( $options as $option ) { ?>
        $selected = ($option[ 'selected' ] == true ? 'selected="selected"' : null);
        <option data-custom_data="<?php echo esc_attr( json_encode( $option[ 'data' ] ) ); ?>" value="<?php echo esc_attr( $option[ 'value' ] ); ?>" <?php echo($selected); ?> >
            <?php echo($option[ 'description' ]); ?>
        </option>
    <?php } ?>
</select>

请让我知道是否可行。