我可以使用CSS将HTML选择转换为"常规文本"吗？

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这里.

请注意,即使这使它看起来像普通文本,它仍然是一个工作选择框!您需要通过某种方式禁用它,方法是使用"禁用"属性并更改字体颜色或其他方式.

Answer 2

在WebKit中,您可以使用它 -webkit-appearance: none;

select {
    -webkit-appearance: none;
    border: none;
}

演示:http://jsfiddle.net/ThiefMaster/56Eu2/2/

要防止用户实际使用选择框,您需要禁用它(disabled属性).

请注意,这是非常不标准的,并不适用-moz-appearance于例如!该-*-appearance属性的行为在各种浏览器中有所不同,Mozilla甚至建议不要在网站上使用它:

不要在Web站点上使用此属性:它不仅是非标准的,而且其行为从一个浏览器更改为另一个浏览器.即使关键字none在不同浏览器上的每个表单元素上也没有相同的行为,有些根本不支持它.