我可以使用CSS將HTML選擇轉換爲「常規文本」嗎？

我在網頁上有一個下拉框，使用HTML5 <select>標籤。有些時候我想讓它成爲「只讀」，即只顯示文本。例如：我可以使用CSS將HTML選擇轉換爲「常規文本」嗎？

有時候，我希望它是「讀/寫」：

Read/write

其他時間我希望它是「只讀」：

enter image description here

我不想使用「禁用」屬性。我認爲這看起來很俗氣，並且暗示當沒有可用的時候，用戶有某種選擇。

是否可以使用CSS將select當前選項的外觀轉換爲正常文本？

來源

2013-03-28 Dylan Klomparens

+1有趣的問題。我真的很想看看像BoltClock這樣的CSS嚮導對此有什麼看法。 –

我會說沒有，因爲造型選擇是不穩定的，在不同的瀏覽器開始 – Huangism

禁用的選擇元素會有什麼選擇，當它明顯禁用，不能與交互？ 'disabled'屬性不僅限制用戶與元素進行交互，還會阻止該元素與表單的其餘部分一起提交。 – cimmanon

是，使用CSS：

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

例如：

http://jsfiddle.net/eG3dS/

因爲「需要火狐」章節中，您將需要一個div或者跨度限制選擇框的大小。這太糟糕了FF在這裏不尊重moz-appearance。

請注意，即使這看起來像普通文本，它仍然是一個工作選擇框！您需要以某種方式禁用它，或者使用「disabled」屬性並更改字體顏色或其他方式。

來源

2013-03-28 19:54:27

'pointer-events：none' - 它會阻止文本被選中。 – ThiefMaster

聖潔的廢話，我很震驚，這在IE中工作。 – Graham

@ThiefMaster不會排除變化！ –

我認爲最簡單的做法是在選區旁邊放一個跨度，然後在選區上使用事件偵聽器將其文本複製到區段中，並切換選區或區段是否可見。這是一個Javascript的，但它會給你很多控制。

來源

2013-03-28 19:36:44 atw13

然後你的回答是「不，用CSS不可能」？ –

這是解決潛在問題的最實際方法，如果不是實際說明的問題。 – Graham

-1

您可以創建一個自定義下拉菜單，並使用CSS進行禁用狀態。

有一個很好的jQuery插件，你可以用此設置：http://uniformjs.com/

來源

2013-03-28 19:36:57 Chris

http://meta.stackexchange.com/questions/45176/when-is-use-jquery-not-a-valid-answer-to-a-javascript-question。此外，這甚至不是一個JavaScript問題，這是一個CSS問題。 –

我們都知道你不能使用CSS來選擇樣式。這是一個有效的替代解決方案。 – Chris

如果你認爲你不能用select來設計一個元素，並且有很好的引用，那麼_that_應該是你如何用JavaScript來做這個評論的答案。問題是「是否可以使用CSS將當前選項的外觀轉換爲正常文本？」，您的答案不會回答這個問題。除此之外，它違背了在meta中決定和投票的共同禮節。我知道你只是在努力幫助，我爲嚴厲的聲音道歉。 –

在WebKit的，你可以做到這一點使用-webkit-appearance: none;

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

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

爲了防止用戶從實際使用選擇框您需要禁用它（disabled屬性）。

請注意，這是高度不標準的，例如不適用於-moz-appearance！ Thebehavior的-*-appearance財產的區別各種瀏覽器和Mozilla甚至recommends not using it on websites at all：

不要在網站上使用此屬性：它不僅是非標準的，而是從一個瀏覽器到另一個的行爲改變。即使關鍵字none在不同瀏覽器上的每個表單元素上也沒有相同的行爲，有些根本不支持它。

來源

2013-03-28 19:42:50 ThiefMaster

我可以使用CSS將HTML選擇轉換爲「常規文本」嗎？

回答

相關問題