如何调整jquery按钮的大小（通过CSS）

Question

Hi Folks我是JQuery的新手

我想要重新调整大小的JQuery按钮 我的代码是

<input type="submit" id="Btn1" value="Login"/>

脚本

中的

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

但是我得到了大字体和大按钮，我希望通过CSS获得小尺寸。

先谢谢

Answer 1

css代码：

#Btn1 {
  font-size: small;
}

或：

#Btn2 {
  font-size: 50%;
}

DEMO

Answer 2

要重新调整按钮的大小，请执行以下操作：

.button_class_name {
 display: block;
 width: 60%;

}

Answer 3

Jquery UI使用相对EM来调整其所有元素的大小。如果没有一些粗略的CSS来在Jquery UI项目中全局设置字体大小，您将在大多数UI的小部件中使用大量按钮和大文本。

要在所有Jquery UI元素中修复此问题，请在正文上设置font-size。

body {
    font-size:10pt; // or 12px
}

这会影响您在网站上使用的所有其他字体大小，因此在将类似内容复制到CSS中时请谨慎使用。

或者，您可以隔离最高级别的父级并声明由按钮继承的绝对字体大小，然后通过Jquery UI相对调整大小。

.button_container {
    font-size:10pt; // or 12px
}

Answer 4

Jquery ui有自己的样式表来呈现为Button，它在幕后使用不同的类来实现功能。您可以查看演示Jquery Button

jquery使用ui-button类来装饰按钮，你可以覆盖这样的设置

input.ui-button
{
    font-size:14px;
    padding:.3em 1em;
}

和Working Demo