如何为离子滑块项目符号提供边框颜色
How to give border-color to ionic slider bullets
我有离子滑动框,我想为活动项目符号提供白色边框。
here is live example to edit 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%;
}
[1]: http://codepen.io/ionic/pen/AjgEB
您可以使用 :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
我有离子滑动框,我想为活动项目符号提供白色边框。 here is live example to edit 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%;
}
[1]: http://codepen.io/ionic/pen/AjgEB
您可以使用 :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