移动端 select 样式不统一问题如何解决 用css
不过弹出层是不可以的
但是展示的地方可以 就像如图
我们找个设计
然后你就可以开始做了
首先 appearance:none 会导致一些不对的地方 不可以单独使用
其实我们发现我们需要这样一个layout
html
111
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; }}
这时候我慌了 这个小三角怎么办
htmlscss
@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; 可以啦