Question

我有选择html元素的问题。当我将我的铬模式更改为设备模式，如苹果ipad或其他任何选择元素已损坏。下拉菜单周围有一些黑色空间。这是源代码和屏幕截图。

HTML：

<body>
  <select>
    <option>test one</option>
    <option>test two</option>
    <option>test three</option>
    <option>test gour</option>
  </select>
</body>

CSS：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
</style>
</head>

<body>


<select>
<option>test one</option>
<option>test two</option>
<option>test three</option>
<option>test gour</option>
</select>

</body>

</html>

Answer 1

在媒体查询中，在select元素上设置宽度。这将使选择框的宽度正确，但任何长于该框的文本都将被截断。

<强> CSS

@media only screen and (max-width: 760px), (min-width: 768px) and (max-width: 1024px) {
    /* ... */
    select {
        width: 150px;
    }
}

Answer 2

尝试此修改。

<html>

<head>
<style type="text/stylesheet">
html, body, div, span,object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/**/
.select-wrapper {
    background-color: #eee;
    border: 1px solid #aaa;
    color: #aaa;
    cursor: pointer;
    float: left;
    overflow: hidden;
    padding-right: 3em;
    position: relative;
    width: 100%;
}

.select {
    -webkit-appearance: none;
    background-color: #eee;
    border-width: 0;
    box-sizing: border-box;
    cursor: pointer;
    float: left;
    font-size: 1em;
    line-height: 1em;
    padding: 1em 1em;
    width: 100%;
    width: calc(100% + 2em);
    &:focus {
        outline: none;
    }
/**/
</style>
</head>

<body>

  <div class="select-wrapper">
     <select class="select">
       <option value="1" selected="selected">test one</option>
       <option value="2">test two</option>
       <option value="3">test three</option>
       <option value="4">test four</option>
     </select>
     <span class="select-icon entypo-arrow-combo"></span>
   </div>

</body>

</html>

html选择移动设备上的下拉列表

2 个答案: