如何使選擇輸入在所有平臺上的所有瀏覽器中都相同？

我正在解決一個問題，使所有瀏覽器中的選擇輸入看起來都是一樣的（Mac和Chrome上的Chrome呈現它們的方式不同）如何做到這一點？如何使選擇輸入在所有平臺上的所有瀏覽器中都相同？

來源

2011-01-13 web_freak

你沒有。它與用戶期望相沖突。 – deceze 2011-01-13 08:12:15

-1

你應該申請一個CSS重置樣式（不只是輸入，這是所有元素的極力推薦的做法，使你的網頁看起來幾乎相同的所有瀏覽器）有很多，只是谷歌了一下，例如this one，然後應用所需的樣式（邊框顏色和寬度，背景等）承擔瞭如何樣式表單元素

來源

2011-01-13 08:15:56 maid450

是的，它適用於某些瀏覽器，但在Mac上時，外觀仍然Mac'kish :) – 2011-01-25 10:07:02

的ONLY方式看看this tutorial，使它們看起來相同的權利現在將隱藏原始輸入，並將其替換爲適當樣式的html等價物（上帝的forbig Flash對象），它將充當代理，將功能傳遞給隱藏的輸入。

這可能用JavaScript實現自動化。但那將是錯誤。你不應該強迫對網頁的OS樣式元素進行不同的觀察。它與很多可用性和可訪問性實踐相沖突。

所以，唯一的方法是讓你的設計足夠靈活，以支持網頁上不同的控制元素，並且爲不同的瀏覽器使用不同的樣式集，以簡化樣式的調整（目前沒有在所有瀏覽器上使用相同樣式規則的外觀和行爲都相同）。

來源

2011-01-13 12:27:38 bstst

不幸的是，生活只是有點吮吸這一個。等待，直到你需要創建一個文件輸入...現在，這是一個有趣的！

來源

2011-01-13 15:33:38 tybro0103

如果您不介意使用js，您可以簡單地設計自己的外觀（即使img可以與原始選擇元素相同，或者如果您希望可以在css中對其部分進行建模）然後放置一個DIV對圖像的頂部該div將包含選擇元素通常會包含

<div id="selectTxt" >

然後設置最重要的是另一種分度，它裏面的選擇元素中的文本。

<div id="transparentSelect" class="transparent"> 
<select id="selectCar" name="selectCar"> 
     <option>Volvo</option> 
     <option>Saab</option> 
     <option>Mercedes</option> 
     <option>Audi</option> 
    </select> 
</div>

現在關鍵是通過增加一類透明，然後應用類到div

.transparent 
{ 
    filter:alpha(opacity=0); 
    -moz-opacity: 0; 
    opacity: 0; 
}

現在的元素選擇元素不透明度設置爲零您可以通過添加做到這一點是隱藏的，但是當你點擊它時，列表仍然會顯示出來。所以列表將看起來總是像默認列表在瀏覽器中

現在用js你選擇點擊selectTxt div的內部HTML設置它的值每次提取選擇值。這樣，你得到的選擇的文本上的圖像的頂部，你想

您可以用CSS或者JS懸停效果

我也做一個選擇的動畫圖像，看起來在同一所有瀏覽器，但它不起作用，當你直接點擊箭頭... 所以其低劣的版本，但如果你想看看它在這裏是

http://jsfiddle.net/fiddlerOnDaRoof/LM73V/

它也缺少箭頭圖像，但你可以打印屏幕，從您的瀏覽器

好運

來源

2012-05-04 13:54:05 Xitcod13

如何使選擇輸入在所有平臺上的所有瀏覽器中都相同？

回答

相關問題