GWT - Java - CSS - фоновый цвет не отображается

Question

Я очистил свой кеш и попробовал Chrome и IE и несколько разных способов кодирования, однако я не могу получить фоновый цвет кнопок (pencilButton, blueButton, greenButton и redButton) для отображения.

код Java является:

//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"; 
     } 
    }); 

И CSS является:

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

Вы заметите, что я пытался что-то другое в каждом, чтобы попытаться получить цвет фона, чтобы показать. Теория заключается в том, что как только я получил одну работу, я бы изменил остальные, чтобы соответствовать. Разве CSS не должен быть простым?

Ваша помощь очень признательна.

С уважением,

Глин

Answer 1

я, наконец, нашел в "GWT theme style overrides my css style":

Изменить "фон: красный" на "фон: красный важный;". Кроме того, для моей проблемы с границей измените «border: 0px solid white»; to "border: 0px solid white! important;".

Благодарим вас за @AndreiVolgin за ваши усилия, хотя вы не предоставили ответ, который вы положили на правильный путь. Так что спасибо вам большое.

С уважением,

Глин

Answer 2

Вы должны использовать

background: red; 

Это работает, потому что кнопки GWT использовать изображение для их фоне. Поэтому, если вы меняете только цвет, он становится красным, но под изображением, поэтому вы его не видите. Если вы используете правило background, оно заменяет то же правило в классе gwt-Button, которое применяется ко всем кнопкам.