Question

例如，在代码中，“选项”太低，我想只用css（没有javascript）使它更高。

<select>
    <option>Beijing</option>
    <option>ShangHai</option>
    <option>WuHan</option>
  </select>

Answer 1

试试这个：

option{
     padding:10px 0;
   }

JSFIDDLE DEMO

您也可以使用<optgroup> element在Chrome中运行。

修改： -

只是看到它不可靠，并且无法完美地解决跨浏览器解决方案。

MDN说：

某些元素无法使用CSS进行样式设置。这些包括所有高级用户界面小部件，例如范围，颜色或日期控件以及所有下拉窗口小部件，包括，和元素。该文件选择器小部件也被称为根本不可设置样式。新的和元素也属于这一类。

除了Javascript之外的其他选择：

如果可能，请使用Bootstrap's Dropdown.

Answer 2

由于<option>（和<select>）元素由浏览器呈现为下拉列表，遗憾的是您无法设置样式，因为它们的样式仅由浏览器本身。

Answer 3

更改选择＆gt;选项到 ul＆gt; li 列表，您可以使用Cross浏览器兼容性自行设置样式

Answer 4

line-height可能很有用 -webkit-appearance: menulist-button这两个都可以使用

Answer 5

您可以根据需要使用ul替代样式，请检查this answer。

您只能制作选项bold或更改font-size，但无法更改option的空间。

＆＃13;

option{font-size:20px;font-weight:bold;}

＆＃13;

<select>
    <option>Beijing</option>
    <option>ShangHai</option>
    <option>WuHan</option>
  </select>

＆＃13;

选项由操作系统呈现，而不是HTML，因此样式是有限的。

Answer 6

尝试此操作：将高度px更改为您想要的值。

.a option { height: 50px; }

Answer 7

如果您担心移动设备的友好性或Google的移动优先SEO指南，其中可轻敲的项目不得彼此靠近，那么请不要担心，现代移动网络浏览器会自动调整项目的高度。

改变＆＃34;选项＆＃34;的高度只有css

7 个答案: