GWT - Java - CSS - background-color not showing

Question

I have cleared my cache and tried Chrome and IE and a number of different ways of coding, however I can not get the background-color of the buttons (pencilButton, blueButton, greenButton and redButton) to display.

The java code is:

    //Create the colour choice buttons and add them to the HorizontalPanel "headingContainer".
    //Pencil
    final Button pencilButton = new Button("P");
    pencilButton.addStyleName("pencilButton");
    headingContainer.add(pencilButton);
    //Set the pencil colour to pencil.
    pencilButton.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {   

            pencilColour = "black";  
        }
    });
    //Blue
    final Button blueButton = new Button("B");
    blueButton.addStyleName("blueButton");
    headingContainer.add(blueButton);
    //Set the pencil colour to blue.
    blueButton.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {   

            pencilColour = "blue";  
        }
    });
    //Green
    final Button greenButton = new Button("G");
    greenButton.addStyleName("greenButton");
    headingContainer.add(greenButton);
    //Set the pencil colour to green.
    greenButton.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {   

            pencilColour = "green";  
        }
    });
    //Red
    final Button redButton = new Button("R");
    redButton.addStyleName("redButton");
    headingContainer.add(redButton);
    //Set the pencil colour to red.
    redButton.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {   

            pencilColour = "red";  
        }
    });

And the CSS is:

.blueButton {
  display: block;
  width: 25px;
  height: 25px;
  background-color: blue;
  opacity: 1;
}

.greenButton {
  display: block;
  width: 25px;
  height: 25px;
  background-color: green;
  background-size: 100% 100%;
}

.pencilButton {
  display: block;
  width: 25px;
  height: 25px;
  background-color: grey;
  background-size: 100% 100%;
  opacity: 1;
}

.redButton {
  display: block;
  width: 25px;
  height: 25px;
  background-color: red;
}

You will notice that I have tried something different in each one to try to get the background colour to show. The theory being that once I got one working then I would change the others to match. Isn't CSS supposed to be simple?

Your help is greatly appreciated.

Regards,

Glyn

Answer 1

You need to use

background: red;

It works because GWT buttons use an image for their background. So if you only change color, it becomes red but under the image, so you don't see it. If you use background rule, it replaces the same rule in gwt-Button class which is applied to all buttons.

Answer 2

I finally found this in " GWT theme style overrides my css style ":

Change "background: red" to "background: red !important;". Also, for my border problem change "border: 0px solid white;" to "border: 0px solid white !important;".

Thank you to @AndreiVolgin for your efforts, although you did not provide the answer you did put me on the right track. So thank you very much.

Regards,

Glyn