50

我一直在整个页面上使用 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 制作按钮的方式。有任何想法吗？

4

10 回答 10

36

如果它是直接样式ui-button-text，font-size您可以通过应用!important 在更高级别覆盖它。如：

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

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

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

这也应该使 !important.small-button无关紧要。

于 2010-08-01T03:15:44.637 回答
14

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

.ui-button .ui-button-text
{
 line-height: 1.0;
}
于 2011-03-04T16:30:18.703 回答
6

这是我在我的网站中使用的设置字体大小的方法，以便我的按钮大小与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% 将等于父元素的字体大小。

于 2012-07-22T23:55:53.800 回答
5

正如 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 */
}
于 2011-03-04T16:47:57.290 回答
3

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

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

祝你好运。;)

于 2011-03-27T12:10:31.297 回答
3

我结合了上述两个建议。以我喜欢的方式调整 UI 非常容易。

在页面的样式表中添加：

.ui-button .ui-button-text
{
   padding: 0px 11px 0px 21px !important;
   font-size: .72em !important;
}
于 2012-01-09T23:21:36.483 回答
1

我这样做了，效果很好。

$( "button" ).button("font-size", "0.8em");
于 2014-09-24T22:17:06.557 回答
0

我的解决方案也需要在新菜单项中工作

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

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

和上面的第二个强制继承

.ui-button-text {
 font-size: inherit !important;
}
于 2013-04-22T21:15:50.147 回答
0

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

$(function() {
  $("input[type=button]").css("font-size", "0.8em");
});
于 2013-05-20T06:47:07.363 回答
0

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

和我的CSS：

input[type="submit"] {
color: #000;
border: 0 none;
cursor: pointer;
height: 30px;
width: 150px; }
于 2016-05-31T17:21:02.920 回答