css3 - selected添加 border???
問題描述
selected添加 border???
問題解答
回答1:.selected{border-bottom:2px solid rgb(255,203,107)}
回答2:樓主,如果是用select寫的話沒辦法設(shè)置這種效果,建議樓主使用ul li寫。我是個新手,簡單寫了一下,需要改的地方還很多,如果有哪里需要改正希望各位大神指摘一下呀~ 簡單寫的,很多地方?jīng)]有做處理,比如真正模擬select框的話,input右側(cè)最好加個箭頭,可以當作一個開關(guān)這樣子。
PS:第一次在這里粘代碼段,不知道格式是什么樣子。。。湊合看吧。
html代碼:
<p class='choose'> <input type='text' value='--select--' /> <p class='down-select'><ul> <li><a href='http://m.cgvv.com.cn/wenda/5852.html#'>數(shù)學(xué)</a></li> <li><a href='http://m.cgvv.com.cn/wenda/5852.html#'>英語</a></li> <li><a href='http://m.cgvv.com.cn/wenda/5852.html#'>化學(xué)</a></li> <li><a href='http://m.cgvv.com.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();});
相關(guān)文章:
1. 數(shù)據(jù)庫 - Mysql的存儲過程真的是個坑!求助下面的存儲過程哪里錯啦,實在是找不到哪里的問題了。2. python執(zhí)行cmd命令,怎么讓他執(zhí)行類似Ctrl+C效果將其結(jié)束命令?3. MySQL主鍵沖突時的更新操作和替換操作在功能上有什么差別(如圖)4. ios - 類似微博首頁,一張圖的時候是如何確定圖大小的?5. 實現(xiàn)bing搜索工具urlAPI提交6. Python中使用超長的List導(dǎo)致內(nèi)存占用過大7. javascript - 我是做web前端的,公司最近有一個項目關(guān)于數(shù)據(jù)統(tǒng)計的!8. python - Django有哪些成功項目?9. 鏈接圖片時,鏈接不成功10. node.js - 微信小程序websocket連接問題
