更改jQuery UI按钮大小？

Question

我一直在我的页面上使用jQuery UI按钮，但是我还没有找到解决似乎是一个简单问题的方法。 我希望我的一些按钮比另一font: .8em; ，这应该像将按钮文本的CSS设置为类似的font: .8em;一样简单font: .8em; 然而，jQuery UI采用您的DOM元素并包装它：

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
   <span class="ui-button-text">Button Label</span>
</button>

所以如果我有一个<button class="small-button">Small button!</button> jQuery会将文本放在子跨度中。 给予small-button类的任何字体大小都将被忽略。

必须要解决这个问题，而不要犹豫jQuery如何制作按钮。 有任何想法吗？

Answer 1

如果直接使用font-size ui-button-text样式，则可以通过应用！important来覆盖更高级别ui-button-text 。 如：

.small-button {
   font-size: .8em !important;
}

编辑：尝试直接在.ui-button-text上设置CSS样式继承：

.ui-button-text {
   font-size: inherit !important;
} 

这也应该使.small-button上的！important无关紧要。

Answer 2

这有助于减少按钮的高度（平滑度主题默认为行高1.4）：

.ui-button .ui-button-text
{
 line-height: 1.0;
}

Answer 3

以下是我在我的网站中使用的设置字体大小，以便我的按钮大小与jQuery UI网站上的相同。 这是有效的，因为它正是jQuery UI网站的功能！

/* percentage to px scale (very simple)
 80% =  8px
100% = 10px
120% = 12px
140% = 14px
180% = 18px
240% = 24px
260% = 26px
*/

body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size:10px;
}

通过设置body元素的font-size属性，为其他所有内容设置font-size变得微不足道，因为100％= 10px。

在使用百分比时，请注意级联效果 - 子元素的100％将等于父元素的字体大小。

Answer 4

Tim建议，你可以通过修改jQuery生成的标记中包含的span元素的填充来创建不同大小的按钮。

这个标记/ JavaScript ......

$(document).ready(function(){
    $("button").button();
});

<button id="some-id" class="some-class">Some Button</button>

这个转换标记的结果......

<button class="some-class ui-button ui-widget ui-state-default ui-corner-all 
          ui-button-text-only" id="some-id" role="button" aria-disabled="false">
<span class="ui-button-text">some button</span>
</button>

其中最肯定包括最初提供的id和class标签。 您可以通过向span.ui-button-text元素添加更多填充来修改按钮的大小。

像所以......

button#some-id .ui-button-text {
    /* padding values here to your liking */
}

Answer 5

只需更改按钮字体大小;）。

<asp:Button ID="btn2" runat="server" Text="Button" style="font-size:10px" />

现在添加一个jquery脚本到按钮

   <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('input:submit, #btn2').button();
        });
    </script>

祝好运。 ;）

Answer 6

我使用了上面两个建议的组合。 按照我喜欢的方式调整UI非常容易。

要页面的样式表添加：

.ui-button .ui-button-text
{
   padding: 0px 11px 0px 21px !important;
   font-size: .72em !important;
}

Answer 7

我的解决方案也需要处理新的菜单项

第一个选择菜单和按钮的匹配元素

.menu>.ui-button-icon-only,
.ui-button{
font-size:0.8em !important;
}

而第二个如上所述，以强制执行

.ui-button-text {
 font-size: inherit !important;
}

Answer 8

我这样做了，它工作正常。

$( "button" ).button("font-size", "0.8em");

Answer 9

在运行时使用jQuery，无需修改CSS。 这为您提供了更大的灵活性。

$(function() {
  $("input[type=button]").css("font-size", "0.8em");
});

Answer 10

<input type="submit" value="Mostrar imágenes">

和我的css：

input[type="submit"] {
color: #000;
border: 0 none;
cursor: pointer;
height: 30px;
width: 150px; }