Question

我一直在我的页面上使用jQuery UI按钮，但是我还没有找到解决似乎是一个简单问题的方法。我希望我的一些按钮比另一些小，这应该像将按钮文本的CSS设置为类似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

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

.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 website上的相同。这是有效的，因为它正是jQuery UI website所做的！

/* 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

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

此标记/ 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;
}

并且第二个如上所述强迫inheiritance

.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; }

更改jQuery UI按钮大小？

10 个答案: