用了ms-Dropdown插件,在电脑/安卓显示正常
在苹果系统直接无法找到生成的代码块
请问如何解决?
<style>
.ms-pr {
position:relative
}
.ms-dd:focus-visible {
box-shadow:0 1px 5px #ddd;
outline:none;
outline-width:0
}
.ms-dd {
background:#eee;
display:inline-block;
font-family:Sans-Serif;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
vertical-align:top;
width:260px
}
.ms-dd button:focus,.ms-dd input:focus,.ms-dd select:focus,.ms-dd textarea:focus {
outline:none
}
.ms-dd .ms-value-input {
border:0;
left:20px;
position:absolute;
top:10px;
width:50%
}
.ms-dd .ms-dd-header {
border:1px solid #ccc;
border-bottom:none;
border-radius:2px;
cursor:pointer;
min-height:35px;
position:relative;
width:100%
}
.ms-dd .ms-dd-header .option-selected {
color:#000;
display:block;
font-weight:600;
overflow:hidden;
padding:10px 20px 10px 10px;
pointer-events:none
}
.ms-dd .ms-dd-header a {
display:block
}
.ms-dd .ms-dd-header .ms-list-counter,.ms-dd .ms-dd-header input[type=checkbox] {
display:none
}
.ms-dd .ms-dd-header .ms-header-counter {
color:#0e76a8;
font-weight:400
}
.ms-dd .ms-dd-header .ms-filter-box {
border-bottom:1px solid #ccc;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
padding:6px 10px
}
.ms-dd .ms-dd-header .ms-filter-box input,.ms-dd .ms-dd-header .ms-filter-box input:focus,.ms-dd .ms-dd-header .ms-filter-box input:focus-visible {
border:1px solid #c3c3c3;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
height:25px;
padding-left:6px;
width:100%
}
.ms-dd .ms-dd-header .ms-filter-box input:focus-visible {
outline:1px solid transparent
}
.ms-dd .ms-dd-option-image,.ms-dd .ms-dd-selected-img {
margin-right:5px;
max-width:64px;
vertical-align:middle
}
.ms-dd .ms-dd-arrow {
height:0;
margin-top:-3px;
position:absolute;
right:10px;
top:50%;
width:0
}
.ms-dd .ms-dd-arrow.ms-dd-pointer-down {
border:5px solid transparent;
border-top-color:#000
}
.ms-dd .ms-dd-arrow.ms-dd-pointer-up {
border:5px solid transparent;
border-bottom-color:#000;
margin-top:-8px
}
.ms-dd .ms-options {
background:#fff;
border:1px solid #ccc;
border-top:none;
box-shadow:0 1px 5px #ddd;
display:none;
list-style:none;
margin:0;
overflow:auto;
padding:0;
position:absolute;
width:100%;
z-index:9999
}
.ms-dd .ms-list-option,.ms-dd .ms-optgroup ul .ms-list-option {
align-items:center;
border-bottom:1px solid #ddd;
color:#333;
cursor:pointer;
display:flex;
justify-content:flex-start;
overflow:hidden;
padding:10px;
position:relative;
text-decoration:none
}
.ms-dd .ms-list-option input[type=checkbox],.ms-dd .ms-optgroup ul .ms-list-option input[type=checkbox] {
margin-right:5px;
vertical-align:middle
}
.ms-dd .ms-list-option:last-child,.ms-dd .ms-optgroup ul .ms-list-option:last-child {
border-bottom:none
}
.ms-dd .ms-list-option:hover,.ms-dd .ms-optgroup ul .ms-list-option:hover {
background:#f3f3f3;
color:#000
}
.ms-dd .ms-list-option.option-selected,.ms-dd .ms-optgroup ul .ms-list-option.option-selected {
background:#f6f6f6
}
.ms-dd .ms-list-option.ico-align-right .ms-dd-option-image,.ms-dd .ms-list-option.ico-align-right .ms-dd-selected-img,.ms-dd .ms-optgroup ul .ms-list-option.ico-align-right .ms-dd-option-image,.ms-dd .ms-optgroup ul .ms-list-option.ico-align-right .ms-dd-selected-img {
order:2
}
.ms-dd .ms-list-option.disabled,.ms-dd .ms-list-option:disabled,.ms-dd .ms-optgroup ul .ms-list-option.disabled,.ms-dd .ms-optgroup ul .ms-list-option:disabled {
cursor:default;
opacity:.4
}
.ms-dd .ms-list-option .ms-dd-desc,.ms-dd .ms-optgroup ul .ms-list-option .ms-dd-desc {
color:#aaa;
display:block;
font-weight:400;
line-height:1.5em;
overflow:hidden;
text-shadow:0 1px .5px #fff
}
.ms-dd .ms-header-middle-content,.ms-dd .ms-middle {
display:flex;
justify-content:flex-start;
width:100%
}
.ms-dd.disabled,.ms-dd:disabled {
cursor:default;
opacity:.4;
pointer-events:none
}
.ms-dd .ms-optgroup-padding {
font-weight:700;
padding:10px 10px 0
}
.ms-dd .ms-optgroup {
display:block
}
.ms-dd .ms-optgroup:hover {
background:#fff;
color:#000
}
.ms-dd .ms-optgroup ul {
margin:0;
padding:0
}
.ms-dd .ms-optgroup ul .ms-list-option {
padding-left:20px
}
.ms-dd .ms-optgroup ul:last-child {
border-bottom:1px solid #ddd
}
.ms-dd .ms-dd-option-content {
width:100%
}
:focus {
outline:none
}
</style>
<script src="https://cdn.jsdelivr.net/npm/ms-dropdown@4.0.3/dist/js/dd.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<div class="gpo-element gpo-form__group gpo-col-12 show-addon-for-input" data-element-id="select-3">
<div class="gpo-hidden-data">
<input type="hidden" data-field-name="select-3" value="snc3" id="inputselect-3" name="properties[select-3]" gpo-data-variant-id="snc3" gpo-data-product-handle="price" xxm-data-price="xxm3">
</div>
<label for="select-3" class="gpo-label ">
<span class="label-content">install3</span>
</label>
<div class="gpo-select">
<select data-type="select" id="select-3" class="gpo-select" name="select-3" data-name="properties[select-3]" data-field-name="select-3" is="ms-dropdown" onchange="detail(this,'inputselect-3')">
<option selected="" disabled="disabled" value="">Please Select</option>
<option value="embedded3" gpo-data-product-handle="price" gpo-data-variant-id="40268730105995" data-image="//cdn.shopify.com/s/files/1/0382/7263/0923/products/DM_20220507204825_001_medium.jpg?v=1651927745" xxm-data-price="30">embedded3</option>
<option value="plug-in3" gpo-data-product-handle="price" gpo-data-variant-id="40268730138763" data-image="//cdn.shopify.com/s/files/1/0382/7263/0923/products/DM_20220507204825_001_medium.jpg?v=1651927745" xxm-data-price="40">plug-in3</option>
</select>
</div>
</div>