下拉框等需要显示上下箭头切换的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);
 }

效果：