6

I'm trying to apply css with GWT Button widget, however I can apply CSS gradient, the "embossed" style of the widget is still there. How can I remove that?

My gwt application is inherting from this theme:

<inherits name='com.google.gwt.user.theme.clean.Clean'/>

Als have tried:

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

I also have tried adding:

.gwt-Button {}

In the main css file that is loaded on the page however the embossed style is still there.

Anyone knows how to remove the embossed style?

4

2 回答 2

11

选项 1：根本不使用主题

如果您不需要默认样式，并且通常希望为页面提供您自己的样式，那么最简单的方法是完全省略<inherits>主题的声明。GWT 在不使用主题的情况下工作得很好。

（注意：如果您仍然需要主题中的（图像）资源，但没有将 CSS 样式表注入页面，您可以继承com.google.gwt.user.theme.clean.CleanResources而不是com.google.gwt.user.theme.clean.Clean. 这样它们仍然会自动复制到您的 war 文件夹中。）

选项 2：有选择地关闭按钮主题

但是，如果您通常想使用主题，并且只需要给一些按钮您自己的风格，那么一个简单的解决方案是调用

button.removeStyleName("gwt-Button");

注意：removeStyleName()您也可以使用setStyleName("my-Button").

为了方便（并且为了在 UiBinder 中更容易使用），您可能希望派生自己的类，例如

package org.mypackage;

public class MyStyleButton extends Button {
    public MyStyleButton(final String html) {
        super(html);
        removeStyleName("gwt-Button");
    }

    /* ... override all the other Button constructors similarly ... */
}

然后可以在 UiBinder 中导入和使用

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:my='urn:import:org.mypackage'>

    ...

       <my:MyStyleButton>...

选项 3：实际更改 gwt-Button 类属性

如果您想保持按钮的主题外观，并且只更改一些样式属性，那么也可以使用!important（如@bouhmid_tun 建议的那样）覆盖预定义样式类中的某些属性。但请注意：属性列表将来可能会发生变化。.gwt-Button为方便起见，以下是 GWT 2.4.0 的所有预定义样式类：

.gwt-Button {
  margin: 0;
  padding: 5px 7px;
  text-decoration: none;
  cursor: pointer;
  cursor: hand;
  font-size:small;
  background: url("images/hborder.png") repeat-x 0px -2077px;
  border:1px solid #bbb;
  border-bottom: 1px solid #a0a0a0;
  border-radius: 3px;
 -moz-border-radius: 3px;
}
.gwt-Button:active {
  border: 1px inset #ccc;
}
.gwt-Button:hover {
  border-color: #939393;
}
.gwt-Button[disabled] {
  cursor: default;
  color: #888;
}
.gwt-Button[disabled]:hover {
  border: 1px outset #ccc;
}
于 2012-05-07T08:19:45.737 回答
3

为了避免使用 GWT 默认样式，我只!important在我的 CSS 文件中使用标签。您将在此处找到这样做的示例：删除 GWT 生成的绝对位置。祝你好运！

于 2012-05-06T16:34:59.760 回答