我选择了使用 jquery-ui
$(function() {
$("#number")
.selectmenu()
.selectmenu("menuWidget")
.addClass("overflow");
});
fieldset {
border: 0;
}
label {
display: block;
margin: 30px 0 0 0;
}
.overflow {
height: 200px;
}
.ui-menu-item{
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="number">Select a number</label>
<select name="number" id="number">
<option>1</option>
<option selected="selected">2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
</select>
片段不工作,所以这里是 fiddle 链接
https://jsfiddle.net/vgm3txh6/8/
当我这样设置类时,一切都很好
.ui-menu-item{ font-weight: bold; }
但是当我需要在特定的 id 下使用它时,例如像这样
> #number.ui-menu-item{
font-weight: bold;
}
我不应用样式。
我的问题在哪里?
最佳答案
您的 id=number
不是 ui-menu-item
类的父级。
但是 id=number-menu
是。
由于 >
是父选择器,您需要使用下面给出的数字菜单,
#number-menu > .ui-menu-item{
font-weight: bold;
}
关于javascript - id下自定义selectmenu jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49717261/