樣式選擇選項最佳做法

Question

我正在處理涉及選擇下拉列表的網頁。我的工作是使其「功能性」，即展示正確的內容，同時使其「合理美觀」。網頁設計師稍後會來打磨「外觀和感覺」。

讓我感到困惑的是，沒有一種好的方式可以用CSS來設計Html Select元素。所有的框架/解決方案，我發現涉及以下內容：

• 隱藏原來的選擇元素

• 使用<div> <span>或<ul> <li>組合來模擬天然選擇框

• 插件的JavaScript代碼來同步隱藏的本地 選擇框和<div> <span>模擬器中的數據。

我必須編寫一個硒客戶端來測試網頁的行爲。

如果我編寫它來測試本機選擇框，使用上述3個步驟進一步設計下拉式樣將打破測試，因爲硒不允許我點擊隱藏的元素。

如果我現在應用樣式，並編寫硒客戶端以單擊模擬<div><span>，我也冒着未來破壞性測試的風險。因爲網頁設計師可能會選擇不同的樣式選擇框，我今天測試的元素可能會從頁面中刪除。

我想知道是否有人有過類似的經驗，以及解決這類問題的最佳做法是什麼。

Answer 1

我發現你有兩個選擇（你已經打到）。

本機組件上的最小樣式。一些瀏覽器讓你做一些樣式，但主要是像選擇框的高度和寬度的東西，沒有太花哨。這可能是更好的選擇，因爲它是本機的，並且依賴於瀏覽器而不是插件，所以避免讓事情中斷。

或者你可以使用一個插件，因爲你發現做一些奇特的工作來在元素上創建一個div。但是，它們之間有各種不同的插件。

在當前的項目中，我需要一個自定義選擇框。我的腳本所做的是在選擇框後面創建一個div，並將選擇框變爲opacity：0.用戶認爲他們正在點擊幻想div，但實際上正在點擊它前面的選擇框（即使它不可見） 。當他們點擊它時，會彈出常規選擇下拉列表。很酷。最好的部分是，它只在頁面加載時使用javascript來創建div，其他一切都是原生控件。如果你需要更多的信息來做這件事，我可以提供一個例子，但這是我在網上找到的。所以也許你也看過了。