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