更改jQuery UI按钮大小？

我一直在我的页面上使用jQuery UI按钮，但是我还没有找到解决这个问题的方法。我想我的一些按钮来比更小的，这应该是作为按钮文本的CSS设置的东西是简单的像，font: .8em;但是jQuery UI的需要你的DOM元素并把它封装：更改jQuery UI按钮大小？

<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如何制作按钮。有任何想法吗？

来源

2010-08-01 chum of chance

如果它的造型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无关！

来源

2010-08-01 03:15:44 rickp

这没有遗憾的工作。小按钮类挂在按钮元素上，不会覆盖内部跨度。 – 2010-08-01 04:13:42

看看我的编辑，这可能会帮助你。看到您的完整示例（使用所有CSS）将是有益的。我会收集你可能使用的按钮的jQuery UI CSS文件，这可以通过直接修改该CSS来解决，以获得您所需的需求。 – rickp 2010-08-01 05:08:08

这有助于减少按钮的高度，我（平滑主题默认是1.4线高）：

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

来源

2011-03-04 16:30:18 Tim

您可以通过修改包含在span元素的填充创建不同大小的按钮正如蒂姆所建议的那样，在jQuery中产生的标记中。

此标记/ 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-04 16:47:57

只要改变按钮字体大小）。

<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-27 12:10:31 xxx

当使用元素的唯一ID时，'input：submit'选择器不需要额外开销。 – 2011-03-27 12:14:39

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

为了页面的样式表添加：

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

来源

2012-01-09 23:21:36 TrophyGeek

以下是我在我的网站上使用来设置字体大小，这样我的按钮大小都是一样的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元素设置字体大小属性，为其他所有字体设置字体大小变得微不足道，因为100％= 10px。

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

来源

2012-07-22 23:55:53 Dean

我液在新的菜单项工作以及需要

首先要选择两个菜单和按钮

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

，第二个作为上述匹配的元素，迫使inheiritance

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

来源

2013-04-22 21:15:50 Benno

在运行时使用jQuery，无需修改CSS。这给你更多的灵活性。

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

来源

2013-05-20 06:47:07

我这样做，它工作正常。

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

来源

2014-09-24 22:17:06 KungFuMonkey

我不认为这会起作用。我用jQuery 1.11.2试了一下，失败了。这应该是正确的方法：$（“button”）.button（）。css（“font-size”，“0.8em”）; – 2014-12-12 15:51:01

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

和我的CSS：

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

来源

2016-05-31 17:21:02

更改jQuery UI按钮大小？

回答

相关问题