樣式滾動條專用於使用CSS的選擇類型輸入

有一個使用JQuery和CSS樣式的網站。使用表單收集搜索輸入並在選擇框和滾動條上出現問題。樣式滾動條專用於使用CSS的選擇類型輸入

我主要是爲Chrome和IE開發這個功能。現在我很關心Chrome，但跨平臺的解決方案會很好。

樣式化使用WebKit的滾動條等滾動工作得很好：

::-webkit-scrollbar { 
    width: 10px; 
    height: 10px; 
}

與下列作品的樣式選擇輸入框也很不錯：

select { 
    -webkit-appearance: button; 
    -webkit-border-radius: 2px; 
    /*-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);*/ 
    -webkit-padding-end: 20px; 
    -webkit-padding-start: 2px; 
    -webkit-user-select: none; 
    background-image: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5); 
    background-position: center right; 
    background-repeat: no-repeat; 
    border: 1px solid #AAA; 
    color: #555; 
    font-size: inherit; 
    margin: 0; 
    overflow: hidden; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    text-overflow: ellipsis; 
    white-space: nowrap; 

}

似乎我不能彙集是單擊選擇輸入時出現的特定滾動條的樣式（當存在足夠的項目以導致滾動條時）。

它沒有明顯的元素，我不知道它是否真的可以樣式化。 JQuery可能是一個選項，但我不想在插件之後使用插件重載頁面。

頁面上的其他內容都是樣式化的，而Chrome和IE中的默認滾動條在輸入上確實顯得不合適。

我意識到創建我自己的下拉框並填充隱藏的輸入字段可能是一種方式，但它看起來相當不雅，給出了靈活的HTML5和CSS3應該是多麼的靈活，並且將更多的工作和JQuery添加到這一頁。

讚賞任何幫助或見解。

來源

2012-06-07 user1441141

我敢肯定，你不能設計select元素，或者至少不是很好。選擇這個選項會很好，但是我想要改變的值太多了，它更容易創建我自己的。只需使用可點擊的元素創建div，即可更改隱藏輸入的值，並可使用顯示所選值的單獨元素來顯示和隱藏元素。我個人覺得這是最好的方法，因爲你可以完全控制它，讓它可以被設計成你想要的樣式，但是，你也可以使用像jQuery UI這樣的JavaScript UI插件來改變輸入元素的樣式。

來源

2012-06-07 21:48:49 jimjimmy1995

select元素可以被樣式化。我粘貼的代碼工作得很好。缺少的是能夠對單擊時創建的下拉列表進行樣式設置。沒有元素，也不是DOM的一部分。滾動條不是DOM的一部分，但它們也可以用CSS來設計。令人沮喪的是，Chrome並沒有在下拉框中設置* specific *滾動條的樣式。所以我真正的問題是，是否存在任何特定的CSS將它的樣式爲Chrome？ – user1441141

無法對選擇框或箭頭的下拉菜單進行樣式設置，只能設置文本輸入區域的外觀。正如我所說的，最好的方法是創建一個自定義腳本，用一個文本框和一個隱藏的div代替select元素，該div包含div來替換選項。 – jimjimmy1995

這真的取決於項目的規模，這是否值得去做。通常，用戶只能看到幾秒鐘的下拉菜單。還有一個事實是用來查看默認的下拉菜單，而一個自定義的下拉菜單可能會令人困惑。 – jimjimmy1995

一個相關的思想是否使用JS和替代的HTML標記來實現理想的美學效果。爲了美觀而「黑客入侵」會在移動瀏覽器上產生不希望的結果嗎？在iPad上，select元素的默認功能是調出一個選項選擇框。我們會不會因爲黑客入侵而失去這種功能？

來源

2013-06-21 18:54:39 Matt

您可以設置下拉式等，我已經做了很多次。就滾動條而言，以與其他任何事情相同的方式進行。

來源

2014-11-13 05:48:30 psiclone

樣式滾動條專用於使用CSS的選擇類型輸入

回答

相關問題