據我所知，在IE中是不可能的，因爲它使用OS組件。

這裏是一個link控制被替換，但我不知道你是否想要做什麼。

編輯：鏈路斷開時，我傾倒內容

`<select>`新的東西，1

部分由亞倫·古斯塔夫森

所以，你已經建立了一個漂亮的，符合標準網站利用最新的和最大的CSS技術。你已經掌握了每一個元素的造型設計，但是在你的腦海裏，有一點聲音在嘮叨着你是多麼的難看。那麼，今天我們將探索一種方法來沉默這種小聲音，並真正完成我們的設計。通過一個小小的DOM腳本和一些有創意的CSS，你也可以讓你的<select>很漂亮......而且你不會犧牲可訪問性，可用性或優雅的降級。

的問題

我們都知道<select>只是普通的難看。實際上，許多人試圖限制它的使用，以避免它的經典網絡大約在1994年的插圖邊界。我們不應該使用<select>來避免，雖然 - 它是當前表格工具集的重要組成部分;我們應該接受它。也就是說，一些創造性思維可以提高它。

的`<select>`

我們將使用一個簡單的爲我們的例子：

<select id="something" name="something"> 
    <option value="1">This is option 1</option> 
    <option value="2">This is option 2</option> 
    <option value="3">This is option 3</option> 
    <option value="4">This is option 4</option> 
    <option value="5">This is option 5</option> 
</select>

[注：這暗示該<select>是一個完整的形式而言]

所以我們在<select>內有五個<option>。這<select>有一個唯一分配的id「的東西。」根據不同的瀏覽器/平臺上你上觀看它，你<select>可能看起來大致是這樣的：

A <select> as rendered in Windows XP/Firefox 1.0.2. http://v2.easy-designs.net/articles/replaceSelect/images/ffSelect.png

或本

A <select> as rendered in Mac OSX/Safari 1.2. http://v2.easy-designs.net/articles/replaceSelect/images/safariSelect.png

比方說，我們要使它看起來更現代一些，可能是這樣的：

Our concept of a nicely-styled <select>. http://v2.easy-designs.net/articles/replaceSelect/images/desiredSelect.png

那麼我們該怎麼做呢？保持基本的<select>不是一個選項。除了基本的背景顏色，字體和顏色的調整，你並不是真的有很多控制權。然而，我們可以在不犧牲語義，可用性或可訪問性的情況下，以新的形式模仿<select>的卓越功能。爲了這樣做，我們需要檢查一個<select>的性質。

A <select>本質上是一個無序的選擇列表，您可以在其中選擇一個值與表格的其餘部分一起提交。所以，實質上，這是一個類固醇<ul>。繼續這一思路，我們可以用替換<select>一個無序列表，只要我們給它一些增強功能。由於<ul>可以以各種不同的方式進行樣式設計，因此我們幾乎可以免費入住。現在問題變成了「如何確保我們在使用<ul>時保持<select>的功能？」在其他單詞中，如果我們不再使用表單控件，我們如何提交正確的值以及表單？

解決方案

輸入DOM。這個過程的最後一步是使<ul> 函數/感覺像<select>，我們可以用 JavaScript/ECMA腳本和一點聰明的CSS來完成。這裏是需求基本列表中，我們需要有一個功能性人造<select>：

單擊列表中打開它，
點擊列表中的項目，更改分配&關閉列表中的值，
當沒有選擇任何內容時顯示默認值，並且
顯示選擇某項時選擇的列表項。

有了這個計劃，我們就可以開始相繼解決各個部分。

構建列表

所以首先我們需要收集所有的屬性和s的出，重建它作爲一個。我們通過運行以下 JS做到這一點：「現在是什麼，如果有發生的情況選擇<option> 已經」

function selectReplacement(obj) { 
    var ul = document.createElement('ul'); 
    ul.className = 'selectReplacement'; 
    // collect our object's options 
    var opts = obj.options; 
    // iterate through them, creating <li>s 
    for (var i=0; i<opts.length; i++) { 
    var li = document.createElement('li'); 
    var txt = document.createTextNode(opts[i].text); 
    li.appendChild(txt); 
    ul.appendChild(li); 
    } 
    // add the ul to the form 
    obj.parentNode.appendChild(ul); 
}

你可能會想我們可以通過添加另一個循環考慮到這一點，我們創建 <li>來注視選定<option>前，然後在爲了存儲價值class我們選擇<li>爲「選擇」：

… 
    var opts = obj.options; 
    // check for the selected option (default to the first option) 
    for (var i=0; i<opts.length; i++) { 
    var selectedOpt; 
    if (opts[i].selected) { 
     selectedOpt = i; 
     break; // we found the selected option, leave the loop 
    } else { 
     selectedOpt = 0; 
    } 
    } 
    for (var i=0; i<opts.length; i++) { 
    var li = document.createElement('li'); 
    var txt = document.createTextNode(opts[i].text); 
    li.appendChild(txt); 
    if (i == selectedOpt) { 
     li.className = 'selected'; 
    } 
    ul.appendChild(li); 
…

[注：從這裏開始，將選擇選項5，以演示此功能的功能。]

現在，我們可以運行在每個<select>在頁面上該功能（在本例中，一個）與下列內容：

function setForm() { 
    var s = document.getElementsByTagName('select'); 
    for (var i=0; i<s.length; i++) { 
    selectReplacement(s[i]); 
    } 
} 
window.onload = function() { 
    setForm(); 
}

我們幾乎沒有;讓我們添加一些風格。

一些聰明的CSS

我不知道你，但我的CSS的下拉列表中的一個巨大的風扇（尤其是 Suckerfish品種）。我一直在與他們合作一段時間，現在終於明白了， <select>幾乎就像一個下拉菜單，雖然有一點發生在引擎蓋下。爲什麼不把相同的文體理論應用於我們的仿製品-<select>？基本風格是這樣的：

ul.selectReplacement { 
    margin: 0; 
    padding: 0; 
    height: 1.65em; 
    width: 300px; 
} 
ul.selectReplacement li { 
    background: #cf5a5a; 
    color: #fff; 
    cursor: pointer; 
    display: none; 
    font-size: 11px; 
    line-height: 1.7em; 
    list-style: none; 
    margin: 0; 
    padding: 1px 12px; 
    width: 276px; 
} 
ul.selectOpen li { 
    display: block; 
} 
ul.selectOpen li:hover { 
    background: #9e0000; 
    color: #fff; 
}

現在，處理「選擇」列表項，我們需要得到一點狡猾：我們不使用

ul.selectOpen li { 
    display: block; 
} 
ul.selectReplacement li.selected { 
    color: #fff; 
    display: block; 
} 
ul.selectOpen li.selected { 
    background: #9e0000; 
    display: block; 
} 
ul.selectOpen li:hover, 
ul.selectOpen li.selected:hover { 
    background: #9e0000; 
    color: #fff; 
}

注意：懸停僞類爲<ul>使其開放，而不是我們的class - 它作爲「selectOpen」。原因是雙重：

CSS是用於演示，而不是行爲;和
我們希望我們的人造表現得像真正的<select>，我們需要列表在onclick事件中打開，而不是簡單的鼠標懸停。

要實現這一點，我們可以採取什麼樣的，我們從口魚教訓，通過動態分配和動態onclick`事件刪除此class在 ``的onclick events for the list items. To do this right, we will need the ability to change the每個列表項將其應用到我們自己的JavaScript切換以下兩個動作之間：

顯示完整faux- <select>當點擊列表中倒塌選定/默認選項時;和
「選擇」它被點擊時的列表項&摺疊人造。

我們將創建一個名爲selectMe()處理的再分配功能的「選擇」 class，則onclick事件列表項目，以及faux- <select>的倒塌的重新分配：

由於最初的Suckerfish告訴我們，IE不會識別之外的任何東西，因此除了<a>之外，我們需要通過增加來增加我們從中學到的一些代碼。我們可以onmouseover和附加的onmouseout事件到「selectReplacement」 class -ed <ul>及其 <li> S：

function selectReplacement(obj) { 
    … 
    // create list for styling 
    var ul = document.createElement('ul'); 
    ul.className = 'selectReplacement'; 
    if (window.attachEvent) { 
    ul.onmouseover = function() { 
     ul.className += ' selHover'; 
    } 
    ul.onmouseout = function() { 
     ul.className = 
     ul.className.replace(new RegExp(" selHover\\b"), ''); 
    } 
    } 
    … 
    for (var i=0; i<opts.length; i++) { 
    … 
    if (i == selectedOpt) { 
     li.className = 'selected'; 
    } 
    if (window.attachEvent) { 
     li.onmouseover = function() { 
     this.className += ' selHover'; 
     } 
     li.onmouseout = function() { 
     this.className = 
      this.className.replace(new RegExp(" selHover\\b"), ''); 
     } 
    } 
    ul.appendChild(li); 
}

然後，我們可以修改一些選擇在CSS，處理懸停於IE：

ul.selectReplacement:hover li, 
ul.selectOpen li { 
    display: block; 
} 
ul.selectReplacement li.selected { 
    color: #fff; 
    display: block; 
} 
ul.selectReplacement:hover li.selected**, 
ul.selectOpen li.selected** { 
    background: #9e0000; 
    display: block; 
} 
ul.selectReplacement li:hover, 
ul.selectReplacement li.selectOpen, 
ul.selectReplacement li.selected:hover { 
    background: #9e0000; 
    color: #fff; 
    cursor: pointer; 
}

現在我們有一個列表，其行爲如同<select>;但我們仍然需要一種方法來更改所選列表項並更新關聯表單元素的值。

的JavaScript福

我們已經有一個「選擇」 class我們可以應用到我們選擇的列表項，但我們需要一種方式去了解它被點擊當它應用到一個<li>和取出來自任何之前「選擇」的兄弟姐妹。這裏的JS 來實現：

function selectMe(obj) { 
    // get the <li>'s siblings 
    var lis = obj.parentNode.getElementsByTagName('li'); 
    // loop through 
    for (var i=0; i<lis.length; i++) { 
    // not the selected <li>, remove selected class 
    if (lis[i] != obj) { 
     lis[i].className=''; 
    } else { // our selected <li>, add selected class 
     lis[i].className='selected'; 
    } 
    } 
}

[注：我們可以用簡單的className分配和排空，因爲我們是在<li> S的完全控制。如果你（出於某種原因）需要分配其他的類列表項，我建議修改代碼以追加和刪除「選擇」類的className財產。]

最後，我們添加了一個小功能設置原稿<select> （這將連同形式提交）的值被點擊的<li>時：

function setVal(objID, selIndex) { 
    var obj = document.getElementById(objID); 
    obj.selectedIndex = selIndex; 
}

然後，我們可以添加這些功能爲onclick事件我們<li> S的：

… 
    for (var i=0; i<opts.length; i++) { 
    var li = document.createElement('li'); 
    var txt = document.createTextNode(opts[i].text); 
    li.appendChild(txt); 
    li.selIndex = opts[i].index; 
    li.selectID = obj.id; 
    li.onclick = function() { 
     setVal(this.selectID, this.selIndex); 
     selectMe(this); 
    } 
    if (i == selectedOpt) { 
     li.className = 'selected'; 
    } 
    ul.appendChild(li); 
    } 
…

你有它。我們已經創建了功能faux- . As we have not hidden the originalyet, we can [watch how it behaves](files/4.html) as we choose different options from our faux-. Of course, in the final version, we don't want the original to show, so we can hide it by class`-ING爲「更換」，並稱是給JS這裏：

function selectReplacement(obj) { 
    // append a class to the select 
    obj.className += ' replaced'; 
    // create list for styling 
    var ul = document.createElement('ul'); 
…

然後，添加一個新的CSS規則隱藏

select.replaced { 
    display: none; 
}

隨着應用幾個圖像來完成設計（鏈接不可用），我們很好去！

這是另一個link有人說，它不能做。

來源

2008-12-19 03:58:42 some

+0

這個答案的第一個環節是死的（404）。 – mydoghasworms 2011-05-31 07:34:45

+11

@mydoghasworms：我非常抱歉，2½年前的答案中的鏈接不再工作。您仍然可以通過以下網址訪問該頁面：http://web.archive.org/web/20090922234755/http://v2.easy-designs.net/articles/replaceSelect/ – some 2011-05-31 16:27:21

+0

更有用的是將內容從這些內容中提取出來鏈接，因爲鏈接腐爛確實發生！ http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers – rlemon 2012-06-19 12:31:33

1

您需要一個帶有CSS和JavaScript的自定義設計選擇框。如果用戶禁用了JavaScript，您需要確保它完全降級到標準選擇元素。

IMO，這只是不值得的努力。選擇內置字體樣式以使其接近您的網站設計;離開邊界等，到框元素。

來源

2008-12-19 04:02:14 cLFlaVA

2

僅使用css是不容許的。事實上，所有的表單元素都無法自定義，只能在所有瀏覽器上用css進行查看。雖然你可以嘗試niceforms）

來源

2008-12-19 20:47:05

5

從我個人的經驗，當我們試圖把邊界紅色，當一個無效的條目被選中時，不可能在IE中選擇元素的邊框紅色。

如前所述，Internet Explorer中的ocntrols使用WindowsAPI進行繪製和渲染，並且您無需解決此問題。

我們的解決方案是將選擇元素的背景顏色變爲紅色（讓文本可讀）。背景顏色在每個瀏覽器中都有效，但在IE中我們有一個副作用，那就是與選擇的背景顏色相同的元素。

所以總結我們的推杆解決方案：

select 
{ 
    background-color:light-red; 
    border: 2px solid red; 
} 
option 
{ 
    background-color:white; 
}

注意，顏色設置與十六進制代碼，我只是不記得哪。

這個解決方案爲我們提供了除IE邊框紅色外的所有瀏覽器的通緝效果。

好運

來源

2008-12-19 21:11:29

2

看看這個代碼...希望烏爾快樂:)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
<style type="text/css"> 
*{margin:0;padding:0;} 
select {font: normal 13px Arial, SansSerif, Verdana; color: black;} 
.wrapper{width:198px; position: relative; height: 20px; overflow: hidden; border-top:1px solid #dddddd; border-left:1px solid #dddddd;} 
.Select{color: black; background: #fff;position: absolute; width: 200px; top: -2px; left: -2px;} 
optgroup{background-color:#0099CC;color:#ffffff;} 
</style> 
</head> 

<body> 
<div class="wrapper"> 
<select class="Select"> 
<optgroup label="WebDevelopment"></optgroup> 
<option>ASP</option> 
<option>PHP</option> 
<option>ColdFusion</option> 
<optgroup label="Web Design"></optgroup> 
<option>Adobe Photoshop</option> 
<option>DreamWeaver</option> 
<option>CSS</option> 
<option>Adobe Flash</option> 
</select> 
</div> 
</body> 
</html>

Sajay

來源

2009-06-16 13:11:35

2

IE < 8不會呈現下拉列表本身它只是使用Windows控制這不能用這種方式來設計。從IE 8開始，這改變了，現在應用了樣式。當然，它的市場份額還是微不足道的。

來源

2009-06-16 13:15:58 User

2

我周圍的工作不能把一個邊界上的選擇在IE7（IE8在兼容模式下）

給予它的邊界爲逢作爲填充物，它看起來像是....

不是萬能的，但它的開始......

來源

2009-06-16 14:52:28

1

它解決了我的，我的目的：

.select-container { 
    position:relative; 
    width:200px; 
    height:18px; 
    overflow:hidden; 
    border:1px solid white !important 
} 
.select-container select { 
    position:relative; 
    left:-2px; 
    top:-2px 
}

把更多的風格將需要使用嵌套的div。

來源

2010-02-27 18:08:23

1

沿在IE中選擇的一側做一個邊框使用IE瀏覽器的過濾器：

select.required { 左邊框：2px的固體紅; 過濾器：進程id：DXImageTransform.Microsoft.dropshadow（OffX = -2，OffY = 0，顏色=＃FF0000） }

我把邊境一側只有我的需要的狀態所有輸入。

有可能是，對於一個全方位的邊界做的更好的效果...

http://msdn.microsoft.com/en-us/library/ms532853(v=VS.85).aspx

來源

2010-05-18 22:11:46

23

外推吧！:)

filter: 
    progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0,color=#FF0000) 
    progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0,color=#FF0000) 
    progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1,color=#FF0000) 
    progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1,color=#FF0000);

來源

2010-07-16 14:38:28 nemoluca

1

html標籤之前只需添加一個doctype聲明

例：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

它是在JSP文件要去工作爲好。欲瞭解更多信息： HTML Doctype Declaration

來源

2011-01-16 22:10:38

1

它的工作原理！使用下面的代碼：

<style> 
div.select-container{ 
    border: 1px black;width:200px; 
} 
</style> 


<div id="status" class="select-container"> 
    <select name="status"> 
     <option value="" >Please Select...</option> 
     <option value="option1">Option 1</option> 
     <option value="option2">Option 2</option> 
    </select> 
</div>

來源

2011-03-09 16:38:53

5

我是有即同樣的問題，然後我插入這個元標記，它讓我編輯的邊框即

<meta http-equiv="X-UA-Compatible" content="IE=100" >

來源

2011-04-05 23:40:38 nick

2

的邊框樣式屬性一個簡短的命令來定義html元素的所有邊的邊框樣式。每一面都可以有不同的風格。

http://www.handycss.com/tips/styling-borders-with-css/

來源

2012-05-09 08:09:43

選定元素上的IE6/IE7 css邊框

回答

編輯：鏈路斷開時，我傾倒內容

`<select>`新的東西，1

部分由亞倫·古斯塔夫森

的問題

的`<select>`

解決方案

構建列表

一些聰明的CSS

的JavaScript福

選定元素上的IE6/IE7 css邊框

回答

編輯：鏈路斷開時，我傾倒內容

<select>新的東西，1

部分由亞倫·古斯塔夫森

的問題

的<select>

解決方案

構建列表

一些聰明的CSS

的JavaScript福

相關問題

`<select>`新的東西，1

的`<select>`