如何正確設置Select2輪廓的樣式：焦點？

我使用Select2的風格我<select>箱，但我似乎無法風格，鍍鉻適用於風格強制輪廓：如何正確設置Select2輪廓的樣式：焦點？

問題：

我試過的幾行（非常不專業，!important）CSS代碼，但到目前爲止，我還沒有拿出解決方案，這是我在現在：

CSS：

.select2 > *:focus, .select2:focus .select2 > *, .select2 { 
    outline-width: 0px !important; 
}

爲了排除潛在的問題，我肯定包括這個CSS文件，後我經常select2.css

此外，小提琴是有問題的緣故，但如果真的有需要，我可以提供一個

來源

2016-09-02 Roberrrt

這似乎這樣的伎倆：

<style> 
    .select2-container *:focus { 
     outline: none; 
    } 
    </style>

這裏是a plunk。

來源

2016-09-02 14:14:20 Dave

是啊！感謝戴夫，這比我的初始解決方案清潔100％：'select + span.select2：focus，select + span.select2 *：focus { \t outline-color：＃7d3c8c; \t outline-width：1px; }' – Roberrrt

它採用箱的影子，沒有輪廓，看檢查：

.form-control:focus { 
    border-color: #66afe9; 
    outline: 0; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 
}

，所以你需要重置

來源

2016-09-02 14:14:56

我100％確定它沒有使用「box-shadow」，坦率地說，這沒有用。 – Roberrrt

更新：這主要是因爲我沒有使用這種形式的引導 – Roberrrt

我已經跟隨你的喜歡select2，所以你正在使用舊版本，我認爲 –

這是因爲無論是選擇2或Chrome使用outline屬性。這裏是select:focus僞元素的選擇2（+引導）的實際定義：

.form-control:focus { 
    border-color: #66afe9; 
    outline: 0; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 
}

試着改變border和box-shadow代替：

.form-control:focus { 
    border-color: unset; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
}

希望這有助於歡呼聲。

來源

2016-09-02 14:17:23 Ghis

它在某種程度上向我解釋了爲什麼會出現這個問題，但是我沒有從引導實現表單，所以這個解決方案對我不起作用。但是，感謝您的時間和精力！ – Roberrrt

這個工作對我來說：

&.select2-container--focus { 
    outline: none; 
}

來源

2017-09-15 22:05:44

如何正確設置Select2輪廓的樣式：焦點？

回答

相關問題