下拉框等需要顯示上下箭頭切換的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);
}

 效果：