web-dev-qa-db-ja.com

FirefoxのSELECT / OPTIONドロップダウンコントロールの点線を削除するにはどうすればよいですか？

Chromeおよび他のブラウザでは、ドロップダウンが表示されますfine：

enter image description here

ただし、Firefoxには不要な点線行があります：

enter image description here

これらのCSSステートメントを使用して、buttonsおよびinput要素の不要なFirefoxの点線を正常に削除しました。

button::-moz-focus-inner { border: 0; }
input::-moz-focus-inner { border: 0; }

したがって、これらはselect/option要素で機能すると思いましたが、機能しません。

select::-moz-focus-inner { border: 0; }
option::-moz-focus-inner { border: 0; }

このドロップダウンの点線を削除して、Chromeおよび他のブラウザ）のように表示するにはどうすればよいですか？

補遺

これらも機能しません：

select::-moz-focus-inner { border: 0; outline: 0 }
option::-moz-focus-inner { border: 0; outline: 0 }

これらも：

select { outline: 0; }
option { outline: 0; }

これらも：

select { outline: none; }
option { outline: none; }
firefoxdotted-line
26
Edward Tanguay

James Broadの答えはほぼ完璧ですが、オプション項目の「影のみ」のテキストは見苦しいようです。これは私にとって完璧に機能するものです：

select:-moz-focusring {
  color:transparent;
  text-shadow:0 0 0 #000; /* your normal text color here */
}
select:-moz-focusring * {
  color:#000; /* your normal text color here */
  text-shadow:none;
}
9
istr

そのための複合ハックは次のとおりです。

select:focus {
    outline: 1px solid white;
    outline-offset: -2px;
}
select ~ input[type=button] {
    -moz-appearance: menulist-button;
    margin-left: -19px;
    width: 18px;
    height: 18px;
    z-index: 10;
}

次に、各選択の後にtabindex = 0の入力を追加し、フォーカス「委任」のコードを追加します。

$("select ~ input[type=button]").addEvent('focus', function(){
  this.getPrevious().focus();
});
5
kirilloid

https://stackoverflow.com/a/18853002/728855 にある解決策は完全に機能しているようです。

要するに：

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

ここで、＃000はテキストの色です。

4
James Broad

以下のコードのように、requiredで使用する場合：

<select required="true">
    <option value="" selected="true" disabled="true" hidden="true">Select a Option</option>
    <option value="">Option</option>
</select>

以下のように、select:required:invalidに同じパラメータを設定する必要があります。

select {
  &:required {
    &:invalid {
      color: transparent;
      text-shadow: 0 0 0 rgba(0, 0, 0, .4);
    }
  }

  &:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 rgba(0, 0, 0, .4);
  }
}
0
Bruno Wego