下拉框等需要显示上下箭头切换的CSS样式

下拉框等需要显示上下箭头切换的CSS样式

 

.icon-right, .icon-down, .icon-up {
display: inline-block;
padding-right: 13rpx;
position: absolute;
/*组件内调整箭头的位置*/
right: 20rpx;
top: 10rpx;
}

.icon-right::after, .icon-down::after, .icon-up::after {
content: "";
display: inline-block;
position: relative;
bottom: 2rpx;
margin-left: 10rpx;
height: 10px;
width: 10px;
border: solid #bbb;/*上下箭头的颜色*/
border-width: 2px 2px 0 0;/*上下箭头的粗细*/
}

.icon-right::after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.icon-down::after {
bottom: 14rpx;/*旋转后需要上移*/
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}

.icon-up::after {
bottom: 0rpx;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

 效果：