使用CSS设置GWT按钮的样式

我试图用GWT

按钮

小部件应用css，但是我可以应用css渐变，小部件的“浮雕”样式仍然存在。我怎样才能去掉它

我的gwt应用程序源自此主题：

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

在页面上加载的主css文件中，浮雕样式仍然存在

---

有人知道如何去除浮雕样式吗

为了避免使用GWT默认样式，我只使用

！重要信息

我的CSS文件中的标记。您可以在这里找到这样做的示例：。祝你好运

选项1：根本不使用主题 如果您不需要默认样式，并且通常希望为页面提供您自己的样式，那么最容易完全省略主题的

语句。GWT在不使用主题的情况下工作得非常好

（注意：如果您仍然需要主题中的（图像）资源，但不将CSS样式表注入页面，则可以继承

com.google.gwt.user.theme.clean.CleanResources

，而不是

com.google.gwt.user.theme.clean.clean

。这样，它们仍然会自动复制到war文件夹。）

选项2：有选择地关闭按钮的主题化 然而，如果您通常想要使用一个主题，并且只需要提供一些您自己风格的按钮，那么一个简单的解决方案就是调用

button.removeStyleName("gwt-Button");

注意：除了

removeStyleName（）

之外，您还可以使用

setStyleName（“我的按钮”）

为了方便（以及在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>...

---

我的自定义css应用，唯一的问题是浮雕风格，我需要摆脱。但我得到了这样做时，这样做。09:19:03.273[INFO][esewaAdmin]通过将字符串访问器方法添加到CssResource接口以修复模糊类，或使用@external声明修复未模糊类

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 ... */
}

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

.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;
}