zhilizhili-ui 2016始动移动端select美化

dreamtecher 发布于2019-08-28 18:27 / 1402人阅读

摘要：移动端样式不统一问题如何解决用不过弹出层是不可以的但是展示的地方可以就像如图我们找个设计然后你就可以开始做了首先会导致一些不对的地方不可以多带带使用其实我们发现我们需要这样一个

移动端 select 样式不统一问题如何解决用css

不过弹出层是不可以的

但是展示的地方可以就像如图

我们找个设计

然后你就可以开始做了

首先 appearance:none 会导致一些不对的地方不可以多带带使用

其实我们发现我们需要这样一个layout

html

scss

@mixin use-layout-left-pos-and-right-pos() {
    .layout[role="group"] {
        &.left-pos-and-right-pos {
            @extend .utility-pos-relative;
        }
        > .layout__item {
            @include modifiy("prefix") {
                @extend .utility-pos-absolute;
                left: 0;
                top: 0;
            }
            @include modifiy("content") {
                @extend .full-width;
            }
            @include modifiy("suffix") {
                @extend .utility-pos-absolute;
                right: 0;
                top: 0;
            }
        }
    }
}

我们写写样式

scss

@mixin interface-form-select() {
    .form-select {
        @content;
    }
}

@mixin use-form-select() {
    $defaults: (
        ".form-select": (
        )
    );

    @include interface-form-select() {
        display: block;
        @include register-hook("form");
        @content;
    }
}

@mixin use-form-select--basic() {
    $defaults: (
        ".form-select--basic": (
            "padding": 0,
            "border": 1px solid transparent
        )
    );

    .form-select--basic {
        &.grey {
            border-color: get-custom-color("grey", "500");
        }
        select {
            appearance: none;
            border-color: transparent;
            background-color: transparent;
        }
        @include sim-querySelector($defaults, ("padding", "border"));
        @include register-hook("form-select--basic");
        @content;
    }
}

这时候我慌了这个小三角怎么办
html

scss

@import "../utils/size";
@import "../utils/opposite-direction";

// Arrow helper mixin
// ---
// @param [string] $direction: arrow direction
// @param [color] $color (inherit): arrow color
// @param [number] $size (1em): arrow size
// ---
@mixin triangle($direction, $color: currentColor, $size: 1em) {
    // Make sure the direction is valid
    @if not index(top right bottom left, $direction) {
        @warn "Direction must be one of top, right, bottom or left.";
    }

    @else {
        @include size(0, 0); // Size
        content: "";
        z-index: 2;

        border-#{opposite-direction($direction)}: $size * 1.5 solid $color;
        $perpendicular-borders: $size solid transparent;

        @if $direction == top or $direction == bottom {
            border-left:   $perpendicular-borders;
            border-right:  $perpendicular-borders;
        }

        @else if $direction == right or $direction == left {
            border-bottom: $perpendicular-borders;
            border-top:    $perpendicular-borders;
        }
    }
}

.icon.css-shape.shape--arrow-down {
    @include triangle(
        $direction : bottom,
        $color     : get-custom-color("grey", "500"),
        $size      : 5px
    );
}

不过arrow点击的时候好像点不动啊
没事

加个pointer-events:none; 可以啦

云服务器 GPU云服务器美化select 移动端海外移动端移动端推送

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111245.html

zhilizhili-ui 2016始动开始做个样例站吧（一）

摘要：使用，开发者用来表示异步数据流，通过操作符来查询异步数据量，并使用来参数化异步数据流中的并发。在中，你可以表述多个异步数据流，并且使用对象订阅事件流。因为序列是数据流，你可以使用由扩展方法实现的标准查询操作符来查询它们。对我又挖坑了不过其实也不算挖坑因为ui构建中就会有填坑的文章之前一直在写《编写大型web页面结合现有前端形势思考未来前端》这是一篇巨难写的文章估计要到年中...

hzc 2019-08-19 17:17 评论0 收藏0
zhilizhili-ui 2016 web app启动界面制作

摘要：见图确定设计稿大小使用我的中就可以生成一个兼容数值为了加速解析最好把要解析的文本放到页面中如果你想使用在手机端那么就要使用配套的当然不需要自己把提取出来方法已经提取好不需要多虑版本号低于只需要支持一下然后在回调函数里就是正确的布局 content# 指代html content 就是你插入的html内容效果图 showImg(https://segmentfault.com/img/...

2501207950 2019-08-28 18:30 评论0 收藏0
zhilizhili-ui 2016 写写简单的tabview

摘要：每天发垃圾文我也是蛮拼的没有有有前面所说的是什么设计设计要求点击切换滑动切换从图片中我们可以看出上下不定自动填充布局这个我以前讲过了就不写了如果用表述下就是这样的很显然我们需要一个一个每天发垃圾文我也是蛮拼的 web 没有tabview android 有tabviewios 有tabcontrol web 前面所说的是什么设计 showImg(https://segmentfa...

JerryWangSAP 2019-08-19 17:21 评论0 收藏0
编写大型项目web页面从写web登陆页面开始

摘要：页面搭建需要准备什么工具首先我们会和设计师沟通我们需要一些检验设计的工具自动裁图自动测量工具我这里安利一下一个工具我用的可以使用阿里的工具拿到界面不要急着做看看有什么问题有些我都会问端问题如果要兼容我要考虑成本如果是一个人办可能会出现时间的 web页面搭建需要准备什么工具首先我们会和设计师沟通我们需要一些检验设计的工具 ps 自动裁图自动测量工具（我这里安利一下一个工具我用...

cangck_X 2019-08-19 17:15 评论0 收藏0