使用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-ButtonGWT 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;
}

Answer 2

为了避免使用 GWT 默认样式，我只!important在 CSS 文件中使用标签。您将在这里找到这样做的示例：Remove Absolute Position generated by GWT。祝你好运！