Hi ! 
Is it possible to change the color of the top border in a ion-tabs please ?
Hello,
if I see it right on github then ion-tab is inside 2 divs. It seems that that has no Property for border color.
Maybe you can wrap something around ion-tabs that mimic what you want or you implement based on ion-tab your personal solution.
Best regards, anna-liebt
How Can I do “based on ion-tab your personal solution” please ?
hello,
ionic framework is open source as far as I know… Please check licence.
Under https://github.com/ionic-team/ionic/tree/master/src/components are the ionic components listed. Based on ion-tabs you can make your own custom component with your needs.
An Other way is maybe to wrap, overlay, underlay…something that mimic your needed visual represtation
Best regards, anna-liebt
1 Like
It will be very hard ?
Hello,
maybe yes, maybe no.
If you don’t want do that, you can post a picture how it looks, and how it should look. Maybe somebody has an idea to mimic that or point to an other uikit, that has this feature.
Otherwise, if you have the time, it is a good learning to see how other people make components like that.
Best regards, anna-liebt
Thanks ! I don’t have picture but it’s really simple. I have white ion tabs and I would like the top border to be black…
I try with a div but that doesn’t work… 
Someone have an idea please ?
Hello,
if I understood it wright it should look like an indicator. Maybe supertabs2 is something for you.
Best regards, anna-liebt
Thank for your help ! No It’s just a solid top border black I would like like If you tap border-top-color : black; border-top-style: solid; border-top-width: 10px; in ion-tabs… Told me if you don’t understand I can draw an example
Anybody please ?
hello,
try following:
ionic serve your app to chrome.
open developer tools
select elements tab and use select tool
select what you want to apply a different css
make in styles window your changes how you it should look
copy these css class or classes and applied in your app in a lifecyle later then ionic.theme.default or whatever your theme is to overwrite original css classes.
for example makes a sandybrown top border on selected tab button
.tabs-md .tab-button[aria-selected=true] {
color: #488aff;
padding: 0;
border-top: sandybrown;
border-style: solid;
}
If you take a look to ionics css in npm module (never make changes there, only look) you will see there are many css classes related to tabs. Maybe you must change more css classes for different states, etc.
Best regards, anna-liebt
I’ve already tried but that didn’t work…
Hello, what have you tried and what was the result.
If you put for example above css class at the end of variable.scss (after imports of ionic stuff, then selected tab button should show a sandybrown border at the top of the button.
If you could find from that many classes related to ionic tabs that can you manipulte for your needs, is up to you.
Best regards, anna-liebt
I tried to modify many class like .tabs-md .tabbar but I hadn’t my top border
I succeeded in put my border in variable scss but the problem is I want this border only for one page… Is it possible ?
Hello,
if you tap on , example tab1, then you want a border on tab1, but when you tap on tab2, tab3,… then there should shown no border and border on tab1 should also disappear?
Best regrads, anna-liebt
My border is on all the ion-tabs on the top like this :
And I would like to this border appear only when I’m on the first page (right icon) but When I put my css in variable.scss it’s on all the page…
Thank you very much for your help !
Hello,
Tab1 selected, then tab1 black border, tab2 no border, tab3 noborder
Tab2 selected, then tab1 no border, tab2 no border, tab3 no border
Tab3 selected, then tab1 no border, tab2 no border, tab3 no border
Tab1 selected, then tab1 black border, tab2 no border, tab3 noborder
So you need a css defined for tabs that act on selected.
try
.tabs-md .tab-button[aria-selected=true] {
padding: 0;
border-top: black;
border-style: solid;
border-width: 10px
}
Is now black border only on selected Tab. Okay?
Next is that only when tab1 is selected css is apllied. Maybe there is a css specilist here for that. I’m a totally beginner with web stuff.
By the way: Maybe it is simpler to make your own tabs based on ionc tabs, instead of this workarounds.
Best regards, anna-liebt