是否可以删除選擇元素中所選專案週圍的虛線?
我尝試添加
outline
屬性,但至少在FF中不起作用。
<style>
select { outline:none; }
</style>
Update
在繼續删除大纲之前,請阅讀此內容。
http://www.outlinenone.com/
最新回復
- 5月前1 #
- 5月前2 #
好吧,Duopixel的迴答很完美.如果我们走得更远,我们可以使其防弹。
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; }
您可以使用,仅適用於Firefox,並且消失了所選選項週圍的丑陋轮廓。
- 5月前3 #
這裏是解決方案協作的解決方案協作,可以解決Firefox選擇框的樣式問题.使用此CSS選擇器作為常規CSS重置的一部分.
Class根据問题删除轮廓,但也删除所有背景圖片(因為我通常使用自定義下拉箭頭,而Firefoxes系統下拉箭頭目前無法删除).如果將背景圖像用於下拉圖像以外的其他任何东西,只需删除
background-image: none !important;
行@-moz-document url-prefix() { select, select:-moz-focusring, select::-moz-focus-inner { color: transparent !important; text-shadow: 0 0 0 #000 !important; background-image: none !important; border:0; } }
- 5月前4 #
通常,窗體控制元件無法以這種精確度进行樣式設置.据我所知,没有一个瀏覽器在所有控制元件中都支援合理的屬性範圍.這就是為什麼有大量的JavaScript庫会使用圖像和其他HTML元素"偽造"表單控制元件,並使用代碼来模仿其原始功能:
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
...
- 5月前5 #
這將针對所有Firefox版本
@-moz-document url-prefix() { select { color: transparent !important; text-shadow: 0 0 0 #000 !important; } }
如果計划在網站上使用同一樣式表的其他頁面上顯示大纲,則可能要删除!important。
相似問題
- html:Firefox,Edge和IE中的Flexbox列反轉htmlcssinternetexplorerfirefoxflexbox2021-01-11 04:58
- html:為什麼隱藏的溢位会阻止浮動元素逃离其容器?htmlcss2021-01-12 01:28
- javascript:在文字區域或文字輸入中多色文字突出顯示javascripthtmlcsshtml5css32021-01-11 23:28
- 使用樣式和CSS更改Pandas Dataframe HTML表python中的文字颜色pythonhtmlcsspandasdataframe2021-01-11 11:26
- html:水平清單專案htmlcss2021-01-11 07:56
我找到了解決方案,但是 它是所有黑客之母,希望它將成為其他更強大解決方案的起點.缺點(我认為太大)是任何不支援
text-shadow
的瀏覽器 但支援rgba
(IE 9)不会渲染文字,除非您使用诸如Modernizr之類的庫(未经測試,只是一个理論)。Firefox使用文字颜色来確定虛線邊框的颜色.所以說,如果你愿意...
Firefox將使虛線邊框透明.但是,当然您的文字也將是透明的! 因此,我们必须以某種方式顯示文字.
text-shadow
进行救援:我们放置了没有偏移且没有模糊的文字阴影,因此替換了文字.当然,较旧的瀏覽器對此一無所知,因此我们必须為该颜色提供後備選項:
這是IE9發挥作用的時候:它支援
rgba
但没有文字阴影,因此您將获得一个明顯為空的選擇框.使用text-shadow
获取您的Modernizr版本 檢測並執行...享受。