我可以将HTML select转换为“选择”吗；“常规文本”；使用CSS？

我在网页上有一个下拉框，使用HTML5

标记。有时我想使其成为“只读”，即仅显示为文本。例如：

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

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

我不想使用“disable”属性。我认为它看起来很俗气，并且暗示着用户在没有选择的情况下会有某种选择

---

是否可以使用CSS将

select

当前选项的外观转换为普通文本？

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

你可以创建一个自定义下拉列表，并使用CSS设置禁用状态

---

有一个非常好的jQuery插件，您可以使用它来设置它：

在WebKit中，您可以使用

-WebKit外观：无

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

演示：

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

请注意，这是高度非标准的，例如，不适用于
-moz外观
！
-*-appearance
属性的行为在不同的浏览器和Mozilla中有所不同，甚至：

不要在网站上使用此属性：它不仅是非标准的，而且其行为在不同浏览器之间也会发生变化。即使关键字none在不同浏览器的每个表单元素上的行为也不相同，有些浏览器根本不支持它

是的，使用CSS：

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

例如：


由于“Firefox需要”部分的原因，您需要创建一个div或span来限制选择框的大小。可惜FF不尊重moz的外观

请注意，即使这使它看起来像普通文本，它仍然是一个工作的选择框！您需要以某种方式禁用它，可以使用“disabled”属性并更改字体颜色或其他方式。
然后您的答案是“否，CSS不可能”？这是解决潜在问题的最实用的方法，如果不是实际问题的话。+1个有趣的问题。我真的很想看看像BoltClock这样的CSS向导会怎么说。我会说“不”，因为样式选择在不同的浏览器中是不稳定的。首先，禁用的选择元素在明显禁用且无法与之交互的情况下意味着有选择吗？
disabled
属性不仅阻止用户与元素交互，还阻止元素与表单的其余部分一起提交。您可以随意使用样式，但需要使用绝对位于顶部的一些额外元素来覆盖“drop”箭头。而且我怀疑它在所有浏览器中都能工作。此外，这甚至不是一个JavaScript问题，而是一个CSS问题。我们都知道不能用CSS来设计select。这是一个有效的替代解决方案。如果您认为无法使用select设置元素的样式，并且对此有很好的引用，那么这应该是您的答案，并将如何使用JavaScript作为对此的注释。问题是“是否可以使用CSS将select的当前选项的外观转换为普通文本？”您的答案没有回答此问题。除此之外，它还违背了在meta中决定和表决的常见礼仪。我知道你只是想帮忙，我很抱歉听起来很刺耳。这个问题的措辞并不意味着javascript的答案是不可接受的。迪伦告诉我们他试图在视觉上做什么——他的最终目标——克里斯给了他一个方法。目前还不清楚Dylan是否知道可以使用javascript进行哪些操作。没有理由阻止这样的回答。@13岁时我不同意，但我更愿意听取其他意见。我在《meta》中回答说，故意让这篇文章保持客观。如果您想争论您的立场，请在那里自由讨论。
指针事件：无
-这将阻止文本被选中。@ThiefMaster，它不会阻止通过制表符进行更改！啊哈，也许我会禁用它并应用这些样式。不幸的是，在IceWeasel中，它使用某种隐式填充进行渲染，这种填充不受我能找到的任何CSS属性的影响，这在Chrome中没有发生，这意味着页面渲染不一致。诚然，这就是我所说的丑陋的临时黑客（这正是我想要它的原因），但如果跨浏览器外观一致性对您所做的事情很重要，请小心。