如何覆盖按钮JQuery的默认样式

嗨，我正在我的页面上构建一个按钮

    $( "#insert-image-button" ) .button() .click(function() { $( "#AttachImage" ).dialog( "open" ); });  Create new user 

该按钮使用标准JQuery样式进行显示。 如何为该按钮提供自己的样式。 什么是最好的方法？

萤火虫说

 class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" 

Answer 1

您可以使用jQuery UI应用不同的主题： http ： //jqueryui.com/themeroller/ 。

Answer 2

你也可以通过css覆盖样式：

css文件：

 #insert-image-button.ui-button { background:red ; border-radius: 0px; } 

Answer 3

正如埃德加已经指出的那样，你可以使用ThemeRoller 滚动你自己的主题。

如果您希望使用其中一个预先存在的主题，则可以从Google Libraries API轻松添加该主题：

将{version}和{theme}替换为您要使用的版本。

使用最新版本（1.8.13）和Smoothness主题的示例：

有关jQuery UI主题和主题的更多信息，请查看文档 。

Answer 4

如果自定义样式内容的实例很少，则可以始终使用内联样式，例如：

或者只是在jQuery中设置css属性：

 $('#insert-image-button').css('background','red').css('border-radius','0px'); // or use the alternative notation $('#insert-image-button').css({ 'background': 'red','border-radius': '0px'}); // you can use classes too $('.insert-image-buttons').css({ 'background': 'red','border-radius': '0px'}); 

您可以在代码中的任何位置键入它。

请注意，这不会覆盖所有UI样式（内联样式会更频繁地成功），并且对于已完成的项目可能并不完全实用。 但它仍然是测试代码的不同样式的便捷方式。

Answer 5

就我而言，我确实喜欢这个

在我的css文件中。

 .myDialog .ui-dialog-buttonpane .ui-dialog-buttonset .ButtonStyle { cursor: pointer; text-align: center; vertical-align: middle; padding-left: 10px; padding-right: 10px; margin-left: 1px; font: 10pt 'Myriad Pro Regular', sans-serif!important; font-weight: 800; color: #ffffff; background-color: #003668; border-left: 1px solid buttonhighlight; border-top: 1px solid buttonhighlight; border-right: 1px solid buttonshadow; border-bottom: 1px solid buttonshadow; } 

在我的javascript文件中

 function ShowDialog() { var options = { width: 600, height: 220, modal: true, autoOpen: false, resizable: false, closeOnEscape: false, my: "center", at: "center", of: window, dialogClass: "myDialog", buttons:[{ text: "Close", "class": "ButtonStyle", click: function(){ // I declared theDialog globally if (theDialog != null) { theDialog.dialog("close"); } } }] }; theDialog = $("#divMultipleMatchPopup").dialog(options); var ret = theDialog.dialog("open"); }