問(wèn)題描述

selected添加 border???

問(wèn)題解答

.selected{border-bottom:2px solid rgb(255,203,107)}

樓主，如果是用select寫(xiě)的話沒(méi)辦法設(shè)置這種效果，建議樓主使用ul li寫(xiě)。我是個(gè)新手，簡(jiǎn)單寫(xiě)了一下，需要改的地方還很多，如果有哪里需要改正希望各位大神指摘一下呀~ 簡(jiǎn)單寫(xiě)的，很多地方?jīng)]有做處理，比如真正模擬select框的話，input右側(cè)最好加個(gè)箭頭，可以當(dāng)作一個(gè)開(kāi)關(guān)這樣子。

PS:第一次在這里粘代碼段，不知道格式是什么樣子。。。湊合看吧。

html代碼：

<p class='choose'> <input type='text' value='--select--' /> <p class='down-select'><ul> <li><a href='http://www.aoyou183.cn/wenda/5852.html#'>數(shù)學(xué)</a></li> <li><a href='http://www.aoyou183.cn/wenda/5852.html#'>英語(yǔ)</a></li> <li><a href='http://www.aoyou183.cn/wenda/5852.html#'>化學(xué)</a></li> <li><a href='http://www.aoyou183.cn/wenda/5852.html#'>生物</a></li></ul> </p></p>

css代碼：

* { margin: 0; padding: 0;} a { text-decoration: none; color: #666;} input.select { width: 100px; height: 30px;} p.down-select { display: none; width: 100px; box-shadow: 0 0 2px 2px #cccccc; } p.down-select ul { list-style-type: none; overflow: hidden; width: 100px; border-bottom: 2px solid #ffb200;} p.down-select ul li { line-height: 20px; border-bottom: 1px solid #cccccc; text-align: center; height: 30px; padding-top: 10px;}

js代碼：

$(’input.select’).click(function(e) { e.preventDefault(); $(’.down-select’).show();});$(’.down-select li’).click(function(e) { e.preventDefault(); var selectVal = $(this).find(’a’).text(); $(’.select’).val(selectVal); $(’.down-select’).hide();});