如何將複雜樣式應用於Select2組件的選擇？

今天我在使用Select2插件時遇到了一個看似簡單的樣式任務，但似乎我想要實現的事情比我想象的要困難得多。這是我想要做的：如何將複雜樣式應用於Select2組件的選擇？

用戶應該能夠從下拉菜單中選擇一個聯繫人。每個聯繫人條目應顯示爲聯繫人的個人資料圖片和其旁邊的一些數據。摺疊後，下拉框應在其旁邊顯示選定的聯繫人（即所選聯繫人的個人資料圖片及其旁邊的一些數據），並在其旁邊顯示「下拉三角形」。在展開狀態下，下拉菜單應另外顯示其他聯繫人，每個聯繫人都有個人資料圖片和數據。簡單地說，我想按照the select2 example page上的「模板」示例中所述進行模板化，只是使用更復雜的佈局（左側的配置文件圖片以及圖片旁邊的三行堆疊文本）。

我設法通過formatResult選擇2選項，使用格式功能，它包裝在風格的div元素（請注意，我使用Twitter的引導的「媒體」 CSS類的圖像和數據所需的樣式應用到結果造型）：

function formatContactResult(item) { 
if(!item.id) 
    return "No contact selected"; 

var contact = JSON.parse(item.text); 
return "<div class='media'><a class='pull-left' href='#'><img style='margin-top: 5px;' class='media-object' data-src='holder.js/64x64' src='" + contact.thumbUrl + "' /></a><div class='media-body' style='font-size: 11px;'><strong>" + contact.displayName + "</strong><br />" + contact.jobTitle + "</div></div>" 
};

我的問題：我無法弄清楚如何這樣的應用複雜的佈局到選擇。我知道formatSelection選項，但formatSelection函數的返回值包含在span元素中，該元素對於複雜佈局不是合適的包裝。儘管我知道這是無效的，但我試圖應用上面提到的相同的佈局函數，但是這樣會導致奇怪的結果（所需的佈局被推到最右邊）。

有沒有人有關於如何使用select2實現所述佈局的線索？

如果有任何興趣，我使用Select2插件與Knockout.js和Twitter Bootstrap。

來源

2013-03-25 MichaelB

我想通了 - 問題是，包含在select2-choice組件中的所有div元素絕對定位和風格在select2.css：

.select2-container .select2-choice div { 
    display: block; 
    width: 18px; 
    height: 100%; 
    position: absolute; 
    right: 0; 
    top: 0; 
    [...] 
}

這種風格用於呈現下拉菜單中的「下拉三角」框，這恰好是一個div元素。不幸的是，三角形div沒有自己的CSS類名稱，應該用它來設置它的樣式。

因此，作爲一種解決方法，我創建了一個新的CSS類，並將其應用於我想在select2-choice組件內部呈現的div元素。這個想法是覆蓋位置和寬度的屬性：

.innerDiv { 
    position: relative !important; 
    width: auto !important; 
}

來源

2013-03-27 13:01:33 MichaelB

任何機會，你有沒有做過任何樣式的文本與select2？我一直在嘗試更改font-size屬性，但即使在編輯CSS之後，我也無法獲得處於下拉狀態下的select2容器內的文本句柄。有什麼建議麼？ – Ace 2013-05-03 17:39:05

是的，我已經能夠設置文本樣式。對於我來說，只需在上面提到的'.innerDiv' CSS類中加入'font-size：10px！important;'即可。當然，你必須檢查你的文本風格是否被任何其他（嵌套）元素覆蓋，這些元素也可能有重要的樣式定義或內聯樣式定義。 – MichaelB 2013-05-07 10:53:16

非常感謝。 – Ace 2013-05-13 15:48:00

如何將複雜樣式應用於Select2組件的選擇？

回答

相關問題