如何为离子滑块子弹提供边框颜色

时间:2016-08-30 07:00:57

标签: css html5 css3 ionic-framework ion-slide-box

我有离子滑动盒,我想为活动子弹提供边框颜色白色。 here是编辑demo的实例,如果您看到活动项目符号为黑色,其余非活动状态为灰色,我希望活动项目符号的边框应如下所示。

这是我到目前为止所尝试的, 我尝试了中风

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

然后我尝试了

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

enter image description here

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

1 个答案:

答案 0 :(得分:0)

您可以使用:before:after伪元素修改离子滑块项目符号的原生样式

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;
}

这是一个可能的修改示例: http://codepen.io/dimshik/pen/yaBOqY