11

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

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

读/写

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

在此处输入图像描述

我宁愿不使用“禁用”属性。我认为它看起来很俗气，并且暗示当没有可用时用户可以选择。

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

4

4 回答 4

13

是的，使用 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这里。

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

于 2013-03-28T19:54:27.890 回答
5

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

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

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

为了防止用户实际使用选择框，您需要禁用它（disabled属性）。

请注意，这是高度非标准的，例如不适-moz-appearance用于！该-*-appearance属性的行为在各种浏览器中有所不同，Mozilla 甚至建议根本不要在网站上使用它：

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

于 2013-03-28T19:42:50.357 回答
0

我认为最简单的方法是在您的选择旁边有一个跨度，并在选择上使用事件侦听器将其文本复制到跨度中，并切换选择或跨度是否​​可见。它有点 Javascript，但它会给你很多控制权。

于 2013-03-28T19:36:44.450 回答
-2

您可以创建一个自定义下拉菜单并设置为禁用状态，使用 CSS 设置样式。

有一个非常好的 jQuery 插件，您可以使用它进行设置：http ://uniformjs.com/

于 2013-03-28T19:36:57.467 回答