web-dev-qa-db-ja.com

枠線の色を選択してください

selectブラウザーのOpera要素に対する境界線（アウトライン、ボックスシャドウ？）を取り除くことができないようです。

以下のルールのいずれも境界を削除していません：

select {
  /*border: 0;*/
  border: none;
  outline: 0;
  background: transparent;
  border-image: none;
  outline-offset: -2px;
  border-color: transparent;
  outline-color: transparent;
  box-shadow: none;
}
<select class="form-control">
  <option selected="selected" value="0">Most Popular</option>
  <option value="1">A-Z</option>
  <option value="2">Z-A</option>
  <option value="3">Lowest price</option>
  <option value="4">Highest price</option>
</select>

Operaバージョンは46.0.2597.57（PGO）です。

上記のコードは、テスト済みの他のブラウザー（Chrome、Firefox、Internet Explorer、およびEdge）で完全に動作しています。

ヒントがあれば役に立ちます。

[〜＃〜] edit [〜＃〜]私はWindows 10 64ビットを使用しています。スクリーンショットは次のとおりです。

htmlcsshtml-selectopera
8
Morpheus

-webkit-appearance: none;を使用して境界線を取り除くことができますが、これによりキャレットも削除されるため、手動で再度追加する必要がある場合があります。 operaは本当にこの境界線に頑固なので、私はこれに対するより良い答えを見つけることができませんでした。（以下のキャレット付きの更新されたソリューション）

select {
  border: 0;
  outline: 0;
  background: transparent;
  border-image: none;
  outline-offset: -2px;
  border-color: transparent;
  outline-color: transparent;
  box-shadow: none;
  -webkit-appearance: none;
}
<select class="form-control" id="1">
  <option selected="selected" value="0">Most Popular</option> 
  <option value="1">A-Z</option>
  <option value="2">Z-A</option>
  <option value="3">Lowest price</option>
  <option value="4">Highest price</option>
</select>

更新されたソリューション：これはソリューションというよりは回避策に似ていますが、これは「偽の」キャレットが機能し、Operaでもボーダレスドロップダウンのように見えます。

select {
  border: 0;
  outline: 0;
  background: transparent;
  border-image: none;
  outline-offset: -2px;
  border-color: transparent;
  outline-color: transparent;
  box-shadow: none;
  -webkit-appearance: none;
  width: 100% ;
  position: absolute;
}

.select-wrapper {
  position: relative;
  max-width: 100px;
}

.select-wrapper:after {
  content: "\25BE";
  float: right;
  margin-top: -3px;
}
<div class="select-wrapper" id="label-for-1">
  <select class="form-control" id="1">
    <option selected="selected" value="0">Most Popular</option>
    <option value="1">A-Z</option>
    <option value="2">Z-A</option>
    <option value="3">Lowest price</option>
    <option value="4">Highest price</option>
  </select>
</div>
4
Matthias Seifert

selectの後ろに無地の背景がある場合は、border: 1px solid whiteのようなものを使用してOperaの境界線を重ねることができます。

または、特定のブラウザーを対象としたCSSハックを使用してselectにWebkitブラウザーのカスタムスタイルを適用し、-webkit-appearance: noneを使用して標準の外観を削除し、標準の矢印にSVG background-imageを適用できます。このように、IEおよびFirefoxの標準的な外観はそのままになります。

select {
  border: 0;
  outline: 0;
  background-color: transparent;
}


/* Select only webkit browsers */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  select {
    /* remove arrow */
    -webkit-appearance: none;
    /* add some padding for image */
    padding-right: 15px; 
    /* apply SVG with arrow */
    /* change width value to move arrow to the left */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="15" viewBox="0 0 15 15"><path d="M 8,5.5 11,9.5 14,5.5 z"></path></svg>');
    background-repeat: no-repeat;
    background-position: center right;
  }
}
<select class="form-control">
  <option selected="selected" value="0">Most Popular</option>
  <option value="1">A-Z</option>
  <option value="2">Z-A</option>
  <option value="3">Lowest price</option>
  <option value="4">Highest price</option>
</select>
2
Vadim Ovchinnikov