How to give border-color to ionic slider bullets

Question

I have ionic slide box, I want to give border color white for active bullet. here is live example to edit demo if you see active bullet has black color, and rest inactive have gray, I want border for active bullet that should look like as below img.

Here is what I tried so far, I tried with stroke

.slider-pager .slider-pager-page.active {
    color: #000;
    fill: #000;
    stroke: #fff;
    background-color: #fff;
    border-radius: 50%;
    /* height: 17px; */
    stroke-width: 3px;
}

then I tried with

.slider-pager .slider-pager-page.active {
  border:1px solid #fff;
  border-radius:50%;
}

[1]: http://codepen.io/ionic/pen/AjgEB

can you please show what you have tried and where you are stuck? — dubes, Aug 30 '16 at 07:10

score 0 · Accepted Answer · answered Aug 30 '16 at 08:01

You can modify the native styling of ionic slider bullets with :before and :after pseudo elements

i.icon.ion-record {
  position:relative;
}

.slider-pager span.slider-pager-page {
  opacity:1;
}

.slider-pager span.slider-pager-page.active i.icon.ion-record:after {
  border-color:black;
}
i.icon.ion-record:after {
position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:2px;
  margin:auto;
  content:"";
  width: 1px;
  height: 1px;
  border:4px solid white;
  border-radius:100%;
  z-index:1;
}

i.icon.ion-record:before {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  content:"";
  width: 1px;
  height: 1px;
  border:6px solid red;
  border-radius:100%;
    z-index:0;
}

here is an example of a possible modification: http://codepen.io/dimshik/pen/yaBOqY

How to give border-color to ionic slider bullets

1 Answers1