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

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

不过弹出层是不可以的

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

我们找个设计

然后你就可以开始做了

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

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

html

<div class="layout flex horizontal left-pos-and-right-pos full-width" role="group" style="height: 30px;">
    <div class="layout__item layout__item--prefix full-height">
        <div class="layout flex full-height horizontal horizontal-center vertical-center">
            <div class="layout__item">1</div>
        </div>
    </div>
    <div class="layout__item layout__item--content full-height">
        <div class="layout flex full-height horizontal horizontal-center vertical-center">
            <div class="layout__item full-height flex-1">1</div>
        </div>
    </div>
    <div class="layout__item layout__item--suffix full-height">
        <div class="layout flex full-height horizontal horizontal-center vertical-center">
            <div class="layout__item">1</div>
        </div>
    </div>
</div>

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

<span class="icon css-shape shape--arrow-down"></span>

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; 可以啦