碼上快樂
1秒登錄
首頁
榜單
標簽
關於
搜索
相關內容
簡體
繁體
在chrome瀏覽器下背景透明問題 本文轉載自 查看原文 2012-03-02 16:10 7075 01-編程實踐 在上篇文章《只用CSS美化選擇框》運用了背景透明的技巧來美化選擇框，但在chrome瀏覽器下遇到了跟ie、ff不一樣的透明效果，下面重現一下： 在一個大的div(背景紅色)內放置一個select元素（背景透明）。在線查看（可在不同瀏覽器中查看效果） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>chrome瀏覽器下select元素透明問題</title> </head> <body> <div style="width: 200px; height: 200px; background: red"> <select style="background: transparent;"> <option>Here is the first option</option> <option>The second option</option> </select> </div> </body> </html> 我們期望的效果如圖： 但chrome瀏覽器卻是這樣子的 問題不言而喻了，chrome居然沒有按照bacground:tansparent的指令行事，好吧，我認為它是另類，給它一個偏方-webkit-appearance: none;（取消webkit默認的樣式）試試！修改后代碼在線效果 查看 確實透明了，但是好像默認的下拉小箭頭也透明了（嚴格來說應該是消失了），stackoverflow上也有相關問題 http://stackoverflow.com/questions/2226666/background-image-for-select-dropdown-does-not-work-in-chrome http://stackoverflow.com/questions/4142619/how-to-make-select-element-be-transparent-in-chrome 總結：webkit內核瀏覽器（chrome、safari）有自己的默認樣式，針對webkit核心的瀏覽器使用-webkit-appearance: none讓select背景透明；這好像不完美，下拉箭頭沒了，我也沒找到完美的方法——既能背景透明又能不失去那個下拉箭頭。推薦《只用CSS美化選擇框》來實現自定義的select框吧！ 有完美的方法，請告知一聲，謝謝！ × 免責聲明！ 本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。 猜您在找
在chrome瀏覽器下背景透明問題
修改chrome瀏覽器的背景顏色
chrome瀏覽器如何設置黑色背景
設置chrome瀏覽器背景顏色
解決SWFUpload在Chrome、Firefox等瀏覽器下的問題
解決SWFUpload在Chrome、Firefox等瀏覽器下的問題
ie瀏覽器下input和select的上下居中問題！！！！
chrome瀏覽器中解決embed標簽 loop="true" 背景音樂無法循環的問題。
一個解決chrome瀏覽器下input標簽當autocomplete的時候背景變黃色同時input背景圖片消失方案
CentOS 7 下安裝Chrome瀏覽器
粵ICP備18138465號
© 2018-2025 CODEPRJ.COM
