Styling buttons in Webix Web skin

Question

For my app, I use the Webix with the 'web' skin. I'm trying to customize the button's background when the button is:

• hovered
• clicked (when the mouse button still pressed)
• just focused

I use the corresponding CSS-slectors:

  .mouseover button:active {
    background:#d7dff7;     
    border-color:#d7dff7;
  }
  .mouseover button:focus{
    background:#e2d7f7;
    border-color:#e2d7f7;
  }  
  .mouseover button:hover{
    background:#c2cae0;
    border-color:#c2cae0;
  }

The only thing I cannot reach is the active selector. In the below sample, try to click on any button and you'll see the default gray background:

http://webix.com/snippet/a5687eff

I thought it should be the class of the clicked button, but it's not working and I'm stuck with this. Any help is appreciated.

Answer 1

The css selector ".webixtype_base:active" has "background: #dedede!important;" in webix.css. That is why your background style for ".mouseover button:active" is being overridden. You simply have to add "!important" so that your background style can take precedence.

See here: http://webix.com/snippet/1ee67de2