欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-29 20:39:43
下拉框等需要显示上下箭头切换的CSS样式 1 .icon-right, .icon-down, .icon-up { 2 display: inline-block; 3 padding-right: 13rpx; 4 position: absolute; 5 /*组件内调整箭头的位置*/ 6 r ......
下拉框等需要显示上下箭头切换的css样式
 
 1 .icon-right, .icon-down, .icon-up {
 2 display: inline-block;
 3 padding-right: 13rpx;
 4 position: absolute;
 5 /*组件内调整箭头的位置*/
 6 right: 20rpx;
 7 top: 10rpx;
 8 }
 9 
10 .icon-right::after, .icon-down::after, .icon-up::after {
11 content: "";
12 display: inline-block;
13 position: relative;
14 bottom: 2rpx;
15 margin-left: 10rpx;
16 height: 10px;
17 width: 10px;
18 border: solid #bbb;/*上下箭头的颜色*/
19 border-width: 2px 2px 0 0;/*上下箭头的粗细*/
20 }
21 
22 .icon-right::after {
23 -webkit-transform: rotate(45deg);
24 transform: rotate(45deg);
25 }
26 
27 .icon-down::after {
28 bottom: 14rpx;/*旋转后需要上移*/
29 -webkit-transform: rotate(135deg);
30 transform: rotate(135deg);
31 }
32 
33 .icon-up::after {
34 bottom: 0rpx;
35 -webkit-transform: rotate(-45deg);
36 transform: rotate(-45deg);
37 }

 效果:

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