CSS付き垂直スクロールバーオーバーレイラウンドボーダーセレクト

Question

複数の選択肢があり、その中にいくつかのオプションがあります。

select { 
 
    overflow-y:scroll; 
 
    height: 200px; 
 
\t border: 1px solid #c4c7cc; 
 
\t border-radius: 20px; 
 
\t margin: 0; 
 
\t padding: 10px; 
 
\t color: #323232; 
 
\t width: 100%; 
 
\t transition: border-color 0.25s ease; 
 
\t font-size: 12px; 
 
} 
 

 
select:not([disabled]):hover, 
 
select:not([disabled]):focus { 
 
\t border-color: #ff7900; 
 
} 
 

 
select[disabled] { 
 
\t opacity: 0.5; 
 
}

<div> 
 
    <select multiple class="form-control"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
    </select> 
 
</div>

私の好みは、デフォルトのスクロールバーを使用し、常に垂直スクロールバーを表示することです。しかし、私の選択にはボーダー半径があるので、実行時に垂直スクロールバーは選択の右上と右下隅を隠します。

これは、IE11ではスクロールバーがコーナーを隠すのに十分なスペースがあるため、IE11でうまくいきます。しかし、Chromeではオーバーレイされます。

私は試しました:: - webkit-scrollbarしかし、私は望んでいないカスタマイズされたスクロールバーを使用するように私に頼みます。

それでは、スクロールバーと枠線の間で選択範囲を空ける方法が問題ですか？

https://jsfiddle.net/x2eqqhqy/

Answer 1

は、私が代わりにselectの親のdivに境界線を設定し、以下の結果を得ます。

div { 
 
    height: 200px; 
 
    border: 1px solid #c4c7cc; 
 
    border-radius: 20px; 
 
    padding: 10px; 
 
    width: 100%; 
 
    transition: border-color 0.25s ease; 
 
} 
 

 

 
select { 
 
    height: 200px; 
 
    border:none; 
 
    color: #323232; 
 
    width: 100%; 
 
    font-size: 12px; 
 
} 
 

 
div:hover{ 
 
    border-color: #ff7900; 
 
}

<div> 
 
    <select multiple class="form-control"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
    </select> 
 
</div>

Answer 2

は親に同じボーダー半径を適用し、このようなoverflow: hiddenを与える：

div { 
    border-radius: 20px; 
    overflow: hidden; 
} 
select { 
    border-radius: 20px; 
} 

Answer 3

あなたがoverflow:hiddenで、親にborder-radiusを設定する必要がありますコーナーを非表示にします。親にheightを設定しないでください。要するに、<select>の要素は、クロスブラウザのスタイルを設定するのが難しいです。すべてのselect/dropdownライブラリは<select>を隠し、より簡単なスタイル要素（通常はdivとスパン）を使用してサロゲートを描画し、JavasScriptを使用して非表示の<select>に選択内容をコピーします。

はここでプラグインを使用せずに、あなたが望むものに近いです：

select { 
 
    overflow-y: scroll; 
 
    height: 200px; 
 
    margin: 0; 
 
    padding: 10px; 
 
    color: #323232; 
 
    width: 100%; 
 
    font-size: 12px; 
 
    border-radius: 20px; 
 
    border-color: transparent; 
 
    outline: none; 
 
} 
 

 
select[disabled] { 
 
    opacity: 0.5; 
 
} 
 

 
div { 
 
    border: 1px solid #c4c7cc; 
 
    border-radius: 20px; 
 
    transition: border-color 0.25s ease; 
 
    overflow: hidden; 
 
} 
 

 
div:hover, 
 
div:active { 
 
    border-color: #ff7900; 
 
}

<div> 
 
    <select multiple class="form-control"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
    </select> 
 
</div>