select下拉框的右边怎么增加提示图标


当前第2页 返回上一页

3.样式部分是用了sass进行控制的,如果不会sass也可以换成css。没有什么特别的运算需要转化,所以换成css也简单

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

@function REM($n){

        @return $n/$REM*1rem;

    }

 #login-p{

        background: url(../ossweb-img/kuang1.png)0 0 no-repeat;

        background-size: 100% 100%;

        width: REM(564);

        height: REM(531);

        margin-left: REM(38);

        .select-wrapper{

            position: relative;

            display: flex;

            justify-content: center;

            align-items: center;

            height: REM(50);

            margin: REM(10) auto;

            padding-top: REM(15);

            &>select{

                width: REM(458);

                height: REM(63);

                padding-left: REM(20);

                border: 1px solid #23282d;

                background: #23282d;

                -webkit-appearance: none;

                color: #92989f;

                font-size: REM(24);

                margin-top: REM(75);

                border-radius: 0;

                z-index:10;

            }

            .arrow{

                position: absolute;

                width: REM(41);

                height: REM(30);

                top: REM(65);

                right: REM(80);

                pointer-events: none;

                z-index:11;

            }

        }

        #notice{

                font-size: REM(20);

                color: #92989f;

                text-align: center;

                margin-top: REM(75);

        }

        #comfire1{

                width: REM(220);

                height: REM(78);

                margin-top: REM(20);

                margin-left: REM(174);

        }

    }

4.解析:主要是.arrow这个元素进行右边那个图标的位置控制。利用position: absolute;这个属性控制好位置,就基本没有问题了。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

H5实现桌面通知

H5在Canvas中实现自定义路径动画

使用canvas实现视频里的弹幕效果

以上就是select下拉框的右边怎么增加提示图标的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

vue.js的ul-li标签仿select标签

html怎样在消息按钮上增加数量角标

html5 表单、select 下拉、textarea多行文本的介绍

了解一下html5中新增加的标签

h5手机扫码怎么实现

jquery中select组件的使用方法

html下拉菜单怎么做?html下拉菜单的代码实例介绍

html select下拉框样式怎么制作?html select样式详解

html中的border、select、fixed

html select标签怎么用

更多相关阅读请进入《select》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...