css - 我可以使用 CSS 将 HTML 选择转换为 "regular text"吗？

Question

我在网页上有一个下拉框，使用 HTML5 <select>标签。有时我想将其设置为“只读”，即仅将其显示为文本。例如:

有时我希望它是“读/写”的:

而其他时候我希望它是“只读的”:

我不想使用“禁用”属性。我认为它看起来俗气，并暗示在没有可用的情况下用户可以以某种方式进行选择。

是否可以将当前选项的外观转换为 select使用 CSS 转换为普通文本？

Answer 1

是的，使用 CSS:

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none; 
    border: none;
    /* needed for Firefox: */
    overflow:hidden;
    width: 120%;
}

例子:

http://jsfiddle.net/eG3dS/

由于“Firefox 需要”部分，您需要制作一个 div 或 span 来限制选择框的大小。很遗憾 FF 在这里不尊重 moz-appearance。

请注意，尽管这使它看起来像普通文本，但它仍然是一个有效的选择框!您需要以某种方式禁用它，方法是使用“已禁用”属性并更改字体颜色或其他方式。