当前位置： 移动技术网 > IT编程>网页制作>CSS > 下拉框等需要显示上下箭头切换的CSS样式

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

2019年06月30日  | 移动技术网IT编程  | 我要评论
下拉框等需要显示上下箭头切换的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 }

 效果：

 

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网