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; 能夠啦