使用CSS设置GWT按钮的样式

Question

我正在尝试使用GWT Button小部件来应用css，但是我可以应用CSS渐变，小部件的“浮雕”样式仍然存在。我怎么能删除它？

我的gwt应用程序正在从这个主题开始：

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

Als尝试过：

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

我也尝试过添加：

.gwt-Button {}

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

任何人都知道如何去除浮雕风格？

Answer 1

选项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 2.4.0 .gwt-Button的所有预定义样式类，以方便您使用：

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

Answer 2

为避免使用GWT默认样式，我只在CSS文件中使用!important标记。你会在这里找到一个这样做的例子：Remove absolute position generated by GWT。祝你好运！