成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

zhilizhili-ui 2016始動(dòng) 移動(dòng)端select美化

dreamtecher / 1212人閱讀

摘要：移動(dòng)端樣式不統(tǒng)一問題如何解決用不過彈出層是不可以的但是展示的地方可以就像如圖我們找個(gè)設(shè)計(jì)然后你就可以開始做了首先會(huì)導(dǎo)致一些不對的地方不可以多帶帶使用其實(shí)我們發(fā)現(xiàn)我們需要這樣一個(gè)

移動(dòng)端 select 樣式不統(tǒng)一問題如何解決 用css

不過彈出層是不可以的

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

我們找個(gè)設(shè)計(jì)

然后你就可以開始做了

首先 appearance:none 會(huì)導(dǎo)致一些不對的地方 不可以多帶帶使用

其實(shí)我們發(fā)現(xiàn)我們需要這樣一個(gè)layout

html


    

        

            
1

        

    

    

        

            
1

        

    

    

        

            
1

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;
    }
}

這時(shí)候我慌了 這個(gè)小三角怎么辦
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點(diǎn)擊的時(shí)候 好像點(diǎn)不動(dòng)啊
沒事

加個(gè)pointer-events:none; 可以啦

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111245.html

相關(guān)文章

  • zhilizhili-ui 2016始動(dòng) 開始做個(gè)樣例站吧 （一）

    摘要：使用，開發(fā)者用來表示異步數(shù)據(jù)流，通過操作符來查詢異步數(shù)據(jù)量，并使用來參數(shù)化異步數(shù)據(jù)流中的并發(fā)。在中，你可以表述多個(gè)異步數(shù)據(jù)流，并且使用對象訂閱事件流。因?yàn)樾蛄惺菙?shù)據(jù)流，你可以使用由擴(kuò)展方法實(shí)現(xiàn)的標(biāo)準(zhǔn)查詢操作符來查詢它們。 對 我又挖坑了 不過其實(shí)也不算挖坑 因?yàn)閡i構(gòu)建中就會(huì)有填坑的文章 之前一直在寫《編寫大型web頁面 結(jié)合現(xiàn)有前端形勢思考未來前端》這是一篇巨難寫的文章 估計(jì)要到年中...

    hzc 評(píng)論0 收藏0

  • zhilizhili-ui 2016 web app啟動(dòng)界面制作

    摘要：見圖確定設(shè)計(jì)稿大小使用我的中就可以生成一個(gè)兼容數(shù)值為了加速解析最好把要解析的文本放到頁面中如果你想使用在手機(jī)端那么就要使用配套的當(dāng)然不需要自己把提取出來方法已經(jīng)提取好不需要多慮版本號(hào)低于只需要支持一下然后在回調(diào)函數(shù)里就是正確的布局 content# 指代html content 就是你插入的html內(nèi)容 效果圖 showImg(https://segmentfault.com/img/...

    2501207950 評(píng)論0 收藏0

  • zhilizhili-ui 2016 寫寫簡單的tabview

    摘要：每天發(fā)垃圾文我也是蠻拼的沒有有有前面所說的是什么設(shè)計(jì)設(shè)計(jì)要求點(diǎn)擊切換滑動(dòng)切換從圖片中我們可以看出上下不定自動(dòng)填充布局這個(gè)我以前講過了就不寫了如果用表述下就是這樣的很顯然我們需要一個(gè)一個(gè) 每天發(fā)垃圾文 我也是蠻拼的 web 沒有tabview android 有tabviewios 有tabcontrol web 前面所說的是什么 設(shè)計(jì) showImg(https://segmentfa...

    JerryWangSAP 評(píng)論0 收藏0

  • 編寫大型項(xiàng)目web頁面 從寫web登陸頁面開始

    摘要：頁面搭建需要準(zhǔn)備什么工具首先我們會(huì)和設(shè)計(jì)師溝通我們需要一些檢驗(yàn)設(shè)計(jì)的工具自動(dòng)裁圖自動(dòng)測量工具我這里安利一下一個(gè)工具我用的可以使用阿里的工具拿到界面不要急著做看看有什么問題有些我都會(huì)問端問題如果要兼容我要考慮成本如果是一個(gè)人辦可能會(huì)出現(xiàn)時(shí)間的 web頁面搭建需要準(zhǔn)備什么工具 首先我們會(huì)和設(shè)計(jì)師溝通 我們需要一些檢驗(yàn)設(shè)計(jì)的工具 ps 自動(dòng)裁圖 自動(dòng)測量工具 （我這里安利一下一個(gè)工具 我用...

    cangck_X 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<