Ionic tabs - change active tab border/icon color

[marko1943]

Hi guys,

I was wondering if it’s possible to change the color of top border in ionic?

I was looking at this sass variables

Ionic Framework

And trying to change anything like

$tabs-border-color: #fff !default
for example. But no luck

I was able to change the active icons color by using this override with CSS

.tabs-md .tab-button[aria-selected=true] .tab-button-icon {
  color: $tabs-color !important;
}

.tabs-ios .tab-button[aria-selected=true] .tab-button-icon {
  color: $tabs-color !important;
}

All though I’m not a fan of using important, I also couldn’t find a different way to change active icon’s color for tabs.

Any suggestions on how to approach this?

Edit: I’m reffering to android but yeah I’d like a neutral solution

[marko1943]

About the 2nd part of the questions, I just realized that material design is for android, so changing the

active icon for tabs on android is:

$tabs-md-tab-icon-color-active: red;

On iOS

$tabs-ios-tab-icon-color-active: red

I wish someone explained that material design = android

But nothing works for the active border

[KishuPro]

If you want to change the top border style of the active tab then you’ll need to first define a style for the border of the anchor tag (which actually represents the tab in the rendered html). Then set whatever style you want to, for example, add the following css code in your app.scss file to affect the top border of the active tab:

.tabbar a[aria-selected=true] {
    border-top: 1px;
    border-style: solid;    
}

And, this should be platform neutral.

[marko1943]

Ok, thanks, so that actually changes like ::active pseudo change stuff - > once the click is out, the border disappears.

Could be some sort of bug with it cause only border-top acts like this

[KishuPro]

The border should stay, can you please post your full app.scss code?

As also, I’d rather use box-shadow to mimic the border properly on all the platforms like this:

.tabbar a[aria-selected=true] {
    border: none;
    box-shadow: 0px 2px 0px 0px #488aff inset;    
}

[marko1943]

Same result with box shadow.

There is basically nothing in my app.scss/variables.scss that would cause this behaviour… Can you confirm it works for you?

My Ionic info is

local packages:

@ionic/app-scripts : 2.1.3
Ionic Framework    : ionic-angular 2.3.0

[KishuPro]

@marko1943

There is basically nothing in my app.scss/variables.scss that would cause this behaviour

Then you should try updating ionic I guess.

@marko1943

Can you confirm it works for you?

Yup it is working at my end, I am on latest versions too.

BTW, I have assumed tabsHighlight is not right for your purposes.

[marko1943]

nah, I have tabsHighlight = "true"

Anyway, It works on iOS - just checked.

It’s buggy for android so I guess its the Ionic version problem.

Unfortunately I can’t update to Ionic 3 yet so I guess this will do for now.

Thanks for helping out!

[KishuPro]

You are welcome!

@marko1943

I have tabsHighlight = “true”

Now that you’ve said the above, I am not sure as to why are you looking for a manual way in the first place? Earlier I had assumed that you were trying to place the highlight bar at the top of the tabs regardless of whether the tabbar itself was on the top of the screen or bottom.

I’d like to know what does or doesn’t the tabsHighlight attribute do in your case so that you need to manually put a border; because it’s always a good practice to use the intrinsically available provisions to do a thing.

[marko1943]

@KishuPro

I’d like to know what does or doesn’t the tabsHighlight attribute do in your case so that you need to manually put a border; because it’s always a good practice to use the intrinsically available provisions to do a thing.

I just want to change the top border color

The default tabsHighlight has predefined colors and I’m asking how to change it

[KishuPro]

@marko1943

The default tabsHighlight has predefined colors and I’m asking how to change it

Okay now I get it. Actually, you used the word ‘top border’ so I was confused a bit as that top border becomes the bottom border if the tab bar placement is at the top of the screen.

Anyways, we don’t have to manually add borders in this case. But there are complications, heres what I’ve found in this regard. The $tabs-border-color is not working yes, and even if it worked, it wouldn’t have been useful right now as there is a ionic bug that stops the highlighted border to show up on ios. So from what I’ve checked till now, you’ve got the following two options:

Option 1: If you need platform specific look and feel, then first use the css code blusk0 has posted in the bug link I’ve provided above as a workaround for ios. This will ensure that you get the border on ios in the first place. Now to actually change the colors for each platform, you’ll have to target each platform in your css individually (let me know if you want this and I’ll help you), that is, if you want just the border color to change. Otherwise, you can use the $tabs-tab-color-active variable to change the color of the borders as well as the texts and the icons for all the platforms at one go.

Option 2: Personally I’d go for this option and it is that you can simply change the mode of the tab itself to md. Firstly this will bypass the bug on ios and show the border there without doing anything else, and secondly, you’ll need simpler css to get the proper result on all the platforms. Here is how you can achieve this:

Define your tab like this specifying the mode attribute:

<ion-tabs mode="md" tabsHighlight="true" tabsPlacement="bottom">

Then to change the color of the border for all platforms add this css in your app.scss file:

.tabs-md[tabsHighlight="true"] .tab-highlight {
    background-color: red;
}

If it’s okay for you that the text color, icon color and the border color all change then use the $tabs-tab-color-active variable rather.

[marko1943]

@KishuPro

Okay now I get it. Actually, you used the word ‘top border’ so I was confused a bit as that top border becomes the bottom border if the tab bar placement is at the top of the screen.

Yap yap, I meant on tabs on bottom, sorry for the confusion.

Anyway, the option 2 worked like a charm!
Works both ways, with changing app.scss tabs-md and changing $tabs-tab-color-active

So that’s awesome! Appreciate the help, thanks a lot!

So why isn’t this documented anywhere?
Or if it is, it’s documented badly cause I’ve spent quite a lot of time searching for a solution and couldn’t find it lol

[KishuPro]

No problem!

Check out this useful link of all the common sass variables you can override: Overriding Ionic Sass Variables

[kiran_nd02]

I have same problem, are u got solution? Please help me,

[marko1943]

Hey Kiran,

There is a solution, this one

Ionic tabs - change active tab border/icon color

Okay now I get it. Actually, you used the word ‘top border’ so I was confused a bit as that top border becomes the bottom border if the tab bar placement is at the top of the screen. Anyways, we don’t have to manually add borders in this case. But there are complications, heres what I’ve found in this regard. The $tabs-border-color is not working yes, and even if it worked, it wouldn’t have been useful right now as there is a ionic bug that stops the highlighted border to show up on ios. So fr…

[HugoPetla]

@KishuPro

.tabs-md[tabsHighlight=“true”] .tab-highlight {
background-color: red;
}

Nice solution, thank you.
How can I put a border on top for all the tabs menu? Because this one’s for the selected tab, and I also need one fixed for all the tabs, like the default grey, but with other color.

[singamkarthi]

In my case, top - border for ionic tab button works for me. But, I need bottom - border. Kindly help me to fix my prob.