博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
zhilizhili-ui 2016始动 移动端select美化
阅读量:5811 次
发布时间:2019-06-18

本文共 3078 字,大约阅读时间需要 10 分钟。

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

不过弹出层是不可以的

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

图片描述

我们找个设计

图片描述

然后你就可以开始做了

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

图片描述

其实我们发现我们需要这样一个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;    }}

图片描述

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

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

图片描述

转载地址:http://ehjbx.baihongyu.com/

你可能感兴趣的文章
30分钟Git命令“从入门到放弃”
查看>>
nginx : TCP代理和负载均衡的stream模块
查看>>
MYSQL数据库间同步数据
查看>>
DevOps 前世今生 | mPaaS 线上直播 CodeHub #1 回顾
查看>>
iOS 解决UITabelView刷新闪动
查看>>
让前端小姐姐愉快地开发表单
查看>>
Dubbo笔记(四)
查看>>
Web前端JQuery入门实战案例
查看>>
java B2B2C Springboot电子商城系统- SSO单点登录之OAuth2.0 登出流程(3)
查看>>
12月26日云栖精选夜读:CDN新品发布:阿里云SCDN安全加速开放公测
查看>>
USB 通信原理
查看>>
7zZip zip RAR iOS
查看>>
date命令的详细用法!
查看>>
分布式存储ceph集群部署
查看>>
UiAutomator源码分析之UiAutomatorBridge框架
查看>>
python 开发之selenium
查看>>
Xcode3.2.5中找不到Mac OS X - Command Line Utility -...
查看>>
css的div垂直居中的方法,百分比div垂直居中
查看>>
如何理解EM算法
查看>>
nginx 域名跳转一例~~~(rewrite、proxy)
查看>>