jQuery 的“选择菜单”的自定义样式

Question

我从 jQuery 网站获得了“选择位置”，但我需要按钮的固定宽度和高度。 下拉按钮的样式应为 150 像素，高度为 46 像素。

在 CSS 中编辑时无法使其工作。

这是我当前的代码：

$(function () {
    $("#locationSelection")
        .selectmenu()
        .selectmenu("menuWidget")
        .addClass("overflow");
});

fieldset {
  border: 0;
}

label {
  display: block;
  margin: 30px 0 0 0;
}

.overflow {
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="form-group">
    <div class="col-lg-6 col-md-6">
        <div class="Location">
            <form id="forLocation" action="#">
                <fieldset>
                    <label for="locationSelection">Location</label>
                    <select name="locationSelection" id="locationSelection">
                        <option value="PR" selected="selected">Prishtine</option>
                        <option value="PZ">Prizren</option>
                        <option value="PD">Podujeve</option>
                        <option value="GI">Gjilan</option>
                        <option value="PJ">Peje</option>
                    </select>
                </fieldset>
            </form>
        </div>
    </div>
</div>

Answer 1

这是更新后的 jsfiddle - https://codepen.io/soniaj204/pen/zVeZOo

#locationSelection-button {
  width: 150px;
  height: 46px;
  box-sizing: border-box;
  line-height: 32px;
}


.ui-button .ui-icon {
  top: 10px;
}