如何设置下拉选择区域的最大高度？

Question

在具有相当大选项列表的选择输入的 vuejs2 应用程序中，它破坏了我在超小型设备上的页面设计。在网络中搜索我发现 \xe2\x80\x9csize\xe2\x80\x9d 属性，但这不是我\n我需要的：我想要下拉选择，这是默认的。\n还有其他决定吗，也许是用CSS设置下拉选择区域的最大高度。

\n

修改后的第 1 部分： \n我在http://photographers.my-demo-apps.tk/sel_test上制作了测试演示页面\nit 有 2 个具有自定义设计和事件的选择输入，如本示例链接所示\n如何设置高度选择框的下拉菜单\n以及js fiddle中的以下解决方法：

\n

\r\n

\r\n

select{\n    color: red;\n}

\r\n

<select onfocus=\'this.size=10;\' onblur=\'this.size=1;\' onchange=\'this.size=1; this.blur();\'>\n  <option>1</option>\n  <option>2</option>\n  <option>3</option>\n  <option>4</option>\n  <option>5</option>\n  <option>6</option>\n  <option>7</option>\n  <option>8</option>\n  <option>9</option>\n  <option>10</option>\n  <option>11</option>\n  <option>12</option>\n  <option>13</option>\n  <option>14</option>\n  <option>15</option>\n  <option>16</option>\n  <option>17</option>\n  <option>18</option>\n  <option>19</option>\n  <option>20</option>\n  <option>21</option>\n</select>\n<div>Popular Tags:</div>

\r\n

\r\n

\r\n

\n

应用于第二个选择输入，它看起来/工作不正常。\n我想它与当前设计有某种冲突。\n它可以以某种方式修复吗？

\n

因为那是 vuejs2 页面，我知道在https://github.com/vuejs/awesome-vue#select有一些选择组件，我使用了其中的一些组件，例如 vue-select 但我需要保留自定义设计所以我尝试使用原始的选择输入...

\n

修改第 2 部分： \n我添加了 2 个类定义：

\n

.select-wrapper {\n    height: 50px !important;\n    overflow-y: visible !important;\n    background-color: yellow !important;\n}\n\n.select {\n    width: 100% !important;\n    /* make it min-height*/\n    min-height: 50px !important;\n    border-radius: 25px !important;\n    border-color: #555 !important;\n    padding: 10px  !important;\n    border:2px dotted red !important;\n}\n

\n

另外，我为这些类设置了背景颜色和边框，以确保这些类\n被应用并且对所有属性都很重要。\n但这没有帮助。可以请您看一下吗！

\n

谢谢你！

\n

Answer 1

指定height:50px将选择限制为 50px。min-height代替使用。还将选择元素包装在具有固定高度的 div 中，以便它会重叠在下面的内容上，而不是将其向下推。

\n

\r\n

\r\n

.select-wrapper {\n  height: 50px;\n  overflow-y: visible;\n}\n\n.select {\n  width: 100%;\n  /* make it min-height*/\n  min-height: 50px;\n  border-radius: 25px;\n  border-color: #555;\n  padding: 10px;\n}

\r\n

<span>Select height is limited to 8 options.</span>\n<div class="select-wrapper form-column form-column-field">\n  <select data-no-search="" data-placeholder="\xd0\x92\xd1\x8b\xd0\xb1\xd1\x80\xd0\xb0\xd1\x82\xd1\x8c \xd0\xb3\xd0\xbe\xd0\xb4" onfocus="this.size=8;" onblur="this.size=1;" onchange="this.size=1; this.blur();" class="select select-no-search">\n    <option disabled="disabled">\n      <font style="vertical-align: inherit;">-Select Year</font>\n    </option>\n    <option value="1922">\n      <font style="vertical-align: inherit;">1922</font>\n    </option>\n    <option value="1923">\n      <font style="vertical-align: inherit;">1923</font>\n    </option>\n    <option value="1922">\n      <font style="vertical-align: inherit;">1924</font>\n    </option>\n    <option value="1923">\n      <font style="vertical-align: inherit;">1925</font>\n    </option>\n    <option value="1922">\n      <font style="vertical-align: inherit;">1926</font>\n    </option>\n    <option value="1923">\n      <font style="vertical-align: inherit;">1927</font>\n    </option>\n    <option value="1922">\n      <font style="vertical-align: inherit;">1928</font>\n    </option>\n    <option value="1923">\n      <font style="vertical-align: inherit;">1929</font>\n    </option>\n    <option value="1922">\n      <font style="vertical-align: inherit;">1930</font>\n    </option>\n    <option value="1923">\n      <font style="vertical-align: inherit;">1931</font>\n    </option>\n    <option value="1922">\n      <font style="vertical-align: inherit;">1932</font>\n    </option>\n    <option value="1923">\n      <font style="vertical-align: inherit;">1933</font>\n    </option>\n  </select>\n</div>\n<div class="footer__block" style="background-color:wheat;height:200px;border:2px dashed green">\n  <h3>Popular tags:</h3>\n  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos dolorem earum magnam sit minima incidunt nemo sed voluptates similique quia.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos dolorem earum magnam sit minima incidunt nemo sed voluptates similique quia.\n</div>

\r\n

\r\n

\r\n

\n

\n

修复第 2 部分：在.selectCSS 规则中，从 main.css 中删除height:50px或在 frontend.css 添加height: auto !important;。
\n此外，您还忘记添加onfocus="this.size=8;" onblur="this.size=1;" onchange="this.size=1; this.blur();"到您突出显示的选择中。

\n我已使用开发控制台在您的页面上本地完成了上述更改，其外观如下：\n

\n