web-dev-qa-db-ja.com

<select> HTMLフォームの境界線の色を変更する

HTMLフォームの<select/>要素の境界線の色を変更することはできますか？

border-colorスタイルはFirefoxでは機能しますが、IEでは機能しません。

Googleで本当の答えを見つけることができませんでした。

htmlcsshtml-select
16
Too embarrassed to say

その選択ブロックをdivブロック内に囲み、次のようにborderプロパティを設定すると考えます。

<div style="border: 2px solid blue;">
  <select style="width: 100%;">
    <option value="Sal">Sal</option>
    <option value="Awesome">Awesome!</option>
  </select>
</div>


あなたは必要なことを達成するためにそれで遊ぶことができるはずです。

24
fuentesjr

Diodeusが述べたように、IEは<select>要素のデフォルトの境界以外は何も許可しません。しかし、私は同様の効果を達成する2つのハックを知っています：

  1. ドロップダウンとまったく同じ位置に配置されたDIVを使用し、その境界線を設定します。ドロップダウンに境界線があるように見えます。

  2. Javascriptソリューションを使用します。たとえば、提供されているものは here です。

ただし、手間がかかりすぎる場合があるため、実際に境界線が必要かどうかを評価する必要があります。

6
Cerebrus

いいえ、<select>コントロールは、IEのクライアントレベルのコントロールではなく、システムレベルのコントロールです。いくつかのバージョンでは、z-indexでうまく再生することさえできず、事実上すべての上に置かれていました。

おしゃれなことをするには、CSSと独自の要素を使用して機能をエミュレートする必要があります。

4
Diodeus - James MacFarlane
select{
    filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1,color=#FF0000);
}

私のために働く。

2
pincopallo

IEで境界線の色を設定できますが、いくつかの問題があります。

ああ...私はあなたがこれを行うことができると誓ったかもしれない...ちょうどテストし、私が間違っていたことに気づいた。ただし、以下の注意事項は引き続き適用されます。

  1. iE8（Beta1-> RC1）で境界線の色または背景色/画像を変更すると、WindowsXPのコントロールのテーマが変更されます（ドロップ矢印とボックスはWindows 95のように見えます）

  2. IEはそれをサポートしていないため、選択コントロール内のオプションのスタイルを設定することはできません。（ バグ＃291 を参照）

1
scunliffe

Border-colorをoutline-colorに置き換えると動作するはずです。

0
user12091799