如何改变jquery.ui selectmenu的字体或大小?

时间:2015-05-15 21:06:11

标签: jquery html css jquery-ui

我遇到了jQueryUI selectmenu的问题。我想更改字体大小或选择菜单大小,我想在selectmenu右侧看到标签。这是我的代码:

<label for="names">Name:</label>
<select id="names">
    <option selected="selected">Choose name</option>
    <option>Bob</option>
    <option>Kate</option>
    <option>Rob</option>
</select>

如果我将selectmenu放入div中,我会在selectmenu下面看到一个标签。这对我不好。

感谢您的回复!

2 个答案:

答案 0 :(得分:0)

查看此网站: http://www.fbloggs.com/2009/03/03/how-to-scale-the-jquery-ui-font-size-for-just-the-ui-widgets/

它展示了如何扩展所有jquery ui小部件。

答案 1 :(得分:0)

在这里,您可以简单地更改jquery selectmenu选项项目的样式:

$(document).ready(function() {
  $("select#num_years").selectmenu({
      width: 200
    })
    .selectmenu("menuWidget")
    .addClass("option_class");

  $("select#num_years").selectmenu("widget").addClass("option_class");

});
.option_class {
  font-size: 25px !important;
  width: 200px;
}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <link href="//code.jquery.com/ui/1.12.1/themes/dark-hive/jquery-ui.css" rel="stylesheet" />

  <select id="num_years" name="num_years">
    <option value="0" style="font-size: 14px !important;">All</option>
    <option value="5">5</option>
    <option value="10">10</option>
  </select>