vue横向拖动进行数值增减效果代码

代码语言:html

所属分类:表单美化

代码描述:vue横向拖动进行数值增减效果代码

代码标签: 进行 数值 增减 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        .vue-scrubber {
            font-size: 15px;
            padding: 0.5em;
            border: 0;

            cursor: ew-resize;
            background: rgba(0, 0, 0, 0.08);
            color: white;
            -webkit-user-select: none;

            font-feature-settings: "lnum" 1;
        }

        .vue-scrubber:hover, .vue-scrubber:focus {
            outline: 0;
            box-shadow: none;
        }


        /** Demo CSS */

        body {
            font-family: "Helvetica Neue", "Arial", sans-serif;
            background: #6247AA;
            color: #E2CFEA;
            -webkit-font-smoothing: antialiased;

            padding: 2rem;
            max-width: 800px;
            margin: 0 auto;
        }

        h1 {
            font-weight: 100;
            letter-spacing: 2px;
        }

        h1 strong {
            letter-spacing: 0;
        }
        p {
            line-height: 1.4;
            -webkit-font-smoothing: antialiased;
            opacity: 0.8;
            font-size: 1rem;
        }

        .parameters {
            margin-top: 4rem;
            background: #6247AA;
        }

        label {
            display: block;
            margin-bottom: 2rem;
        }

        label span {
            display: inline-block;
       .........完整代码请登录后点击上方下载按钮下载查看

网友评论0