首頁>Program>source

是否可以删除選擇元素中所選專案週圍的虛線?

我尝試添加 outline 屬性,但至少在FF中不起作用。

<style>
   select { outline:none; }
</style>

Update
在繼續删除大纲之前,請阅讀此內容。
http://www.outlinenone.com/

最新回復
  • 5月前
    1 #

    我找到了解決方案,但是 它是所有黑客之母,希望它將成為其他更強大解決方案的起點.缺點(我认為太大)是任何不支援 text-shadow的瀏覽器 但支援 rgba (IE 9)不会渲染文字,除非您使用诸如Modernizr之類的庫(未经測試,只是一个理論)。

    Firefox使用文字颜色来確定虛線邊框的颜色.所以說,如果你愿意...

    select {
      color: rgba(0,0,0,0);
    }
    

    Firefox將使虛線邊框透明.但是,当然您的文字也將是透明的! 因此,我们必须以某種方式顯示文字. text-shadow 进行救援:

    select {
      color: rgba(0,0,0,0);
      text-shadow: 0 0 0 #000;
    }
    

    我们放置了没有偏移且没有模糊的文字阴影,因此替換了文字.当然,较旧的瀏覽器對此一無所知,因此我们必须為该颜色提供後備選項:

    select {
      color: #000;
      color: rgba(0,0,0,0);
      text-shadow: 0 0 0 #000;
    }
    

    這是IE9發挥作用的時候:它支援 rgba 但没有文字阴影,因此您將获得一个明顯為空的選擇框.使用 text-shadow获取您的Modernizr版本 檢測並執行...

    .no-textshadow select {
      color: #000;
    }
    

    享受。

  • 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。

  • 如何在ASPNET MVC中禁用会话狀態?
  • 一个程序如何在Linux上拦截另一个程序的stdout和stderr?