Change the colour of the selected tab and the font

2 posts, 0 answers
  1. Ali
    Ali avatar
    1 posts
    Member since:
    Jul 2012

    Posted 25 Jul 2012 Link to this post


    I was wondering how I would go about changing the background color of the selected tab (not the contents of the tab, the tab heading itself, when I hover over it it turns grey but then goes back to normal once I click the tab, I want it to stay grey). I was also wondering how to change the font and font color of the tab heading once selected.

    Please let me know if you need any other information, I'm not really sure how much more specific I can get without taking screenshots but I will if needed.

  2. Clint
    Clint avatar
    58 posts
    Member since:
    Feb 2011

    Posted 31 Jul 2012 Link to this post

    This is your hovered styling........
    div#tabs li.k-item.k-state-default.k-state-hover {
       background-color:grey !important;

    This is your selected state......
    div#tabs li.k-item.k-state-default.k-tab-on-top.k-state-active {
        background-color:grey !important;

    This would be the base for your tab styling.......... just in case you need it
    div#tabs li.k-item.k-state-default {
        color: white !important;
       height: 55px;
       width: 100px;
       margin-right: 5px;
       background-image: none !important;

    Keep in mind that I have    "div#tabs" in the beginning, so you would need to change that depending on your selector and ID.
Back to Top