web-dev-qa-db-ja.com

IE6 / IE7の選択要素のCSS境界線

CSSを使用してInternet Explorerの「選択」要素の境界線をスタイリングするためのソリューションはありますか？

cssinternet-explorerinternet-explorer-6internet-explorer-7cross-browser
31
codegy

私の知る限り、IEではOSコンポーネントを使用しているため、これは不可能です。

ここに link がありますが、コントロールが置き換えられますが、それがあなたが何をしたいのかわかりません。

編集：リンクが壊れていますコンテンツをダンプしています

<select>何か新しいこと、パート1

アーロン・グスタフソン

これで、最新かつ最高のCSSテクニックを利用して、美しく標準に準拠したサイトを構築できました。すべての要素をスタイリングするコントロールをマスターしましたが、心の奥では、<select>sのhowさについて少し声を掛けています。さて、今日はその小さな声を黙らせ、デザインを完全に完成させる方法を探ります。少しのDOMスクリプトといくつかの創造的なCSSで、あなたも<select>sを美しくすることができます...そして、アクセシビリティ、使いやすさ、または優雅な劣化を犠牲にする必要はありません。

問題

<select>が単なる見苦しいことを知っています。実際、多くの人が1994年の差し込み枠の周りの古典的なウェブを避けるためにその使用を制限しようとします。 <select>の使用を避けるべきではありません。これは現在のフォームツールセットの重要な部分です。私たちはそれを受け入れるべきです。とはいえ、いくつかの創造的な思考がそれを改善することができます。

<select>

この例では単純なものを使用します。

<select id="something" name="something">
  <option value="1">This is option 1</option>
  <option value="2">This is option 2</option>
  <option value="3">This is option 3</option>
  <option value="4">This is option 4</option>
  <option value="5">This is option 5</option>
</select>

[注：この<select>は完全なフォームのコンテキスト内にあることが暗示されています。]

したがって、<option>内に5つの<select>があります。この<select>には、「何か」のidが一意に割り当てられています。表示しているブラウザ/プラットフォームに応じて、<select>は次のようになります。

A <select> as rendered in Windows XP/Firefox 1.0.2.
（ソース： easy-designs.net ）

またはこれ

A <select> as rendered in Mac OSX/Safari 1.2.
（ソース： easy-designs.net ）

次のように、もう少しモダンに見せたいとしましょう。

Our concept of a nicely-styled <select>.
（ソース： easy-designs.net ）

それではどうすればいいのでしょうか？基本的な<select>を保持することはオプションではありません。基本的な背景色、フォント、色の調整は別として、あなたは実際に多くのコントロールを持っていません。

ただし、セマンティクス、使いやすさ、アクセシビリティを犠牲にすることなく、新しいフォームコントロールの<select>の優れた機能を模倣できます。そのためには、<select>の性質を調べる必要があります。

<select>は、基本的に、フォームの残りの部分とともに送信する単一の値を選択できる選択肢の順序なしリストです。したがって、本質的には、ステロイドの<ul>です。この考え方を続けると、拡張機能を提供する限り、<select>を順序付けられていないリストに置き換えることができます。 <ul>sにはさまざまな方法でスタイルを設定できるため、ほとんど家にいません。ここで、質問は「<select>を使用するときに<ul>の機能をどのように維持するか？」になります。つまり、フォームコントロールを使用しなくなった場合に、フォームと共に正しい値を送信するにはどうすればよいでしょうか？

ソリューション

DOMを入力します。プロセスの最後のステップは、<ul>関数/感触を<select>のようにすることです。これは、JavaScript/ECMAスクリプトと少し巧妙なCSSで実現できます。機能的な偽物<select>を作成するために必要な基本的な要件のリストは次のとおりです。

  • リストをクリックして開き、
  • リスト項目をクリックして、割り当てられた値を変更し、リストを閉じます。
  • 何も選択されていない場合、デフォルト値を表示します。
  • 何かが選択されたときに、選択されたリスト項目を表示します。

この計画により、各部分に連続して取り組むことができます。

リストを作成する

そのため、最初にすべての属性とを収集し、それをとして再構築する必要があります。これを実現するには、次のJSを実行します。

function selectReplacement(obj) {
  var ul = document.createElement('ul');
  ul.className = 'selectReplacement';
  // collect our object's options
  var opts = obj.options;
  // iterate through them, creating <li>s
  for (var i=0; i<opts.length; i++) {
    var li = document.createElement('li');
    var txt = document.createTextNode(opts[i].text);
    li.appendChild(txt);
    ul.appendChild(li);
  }
  // add the ul to the form
  obj.parentNode.appendChild(ul);
}

「選択された<option>が既にある場合、今はどうなりますか？」 <li>sを作成して選択した<option>を検索する前に別のループを追加して、これを説明し、選択した<li>を「選択済み」としてclassに格納します。

…
  var opts = obj.options;
  // check for the selected option (default to the first option)
  for (var i=0; i<opts.length; i++) {
    var selectedOpt;
    if (opts[i].selected) {
      selectedOpt = i;
      break; // we found the selected option, leave the loop
    } else {
      selectedOpt = 0;
    }
  }
  for (var i=0; i<opts.length; i++) {
    var li = document.createElement('li');
    var txt = document.createTextNode(opts[i].text);
    li.appendChild(txt);
    if (i == selectedOpt) {
      li.className = 'selected';
    }
    ul.appendChild(li);
…

[注：これ以降、この機能を示すためにオプション5が選択されます。]

これで、次のようにして、ページ上のすべての<select>（この場合は1つ）でこの関数を実行できます。

function setForm() {
  var s = document.getElementsByTagName('select');
  for (var i=0; i<s.length; i++) {
    selectReplacement(s[i]);
  }
}
window.onload = function() {
  setForm();
}

もうすぐです。スタイルを追加しましょう。

巧妙なCSS

あなたについては知りませんが、私はCSSドロップダウンの大ファンです（特に Suckerfish 種類）。私は今しばらく彼らと働いてきましたが、<select>はドロップダウンメニューに似ていることが最終的にわかりましたが、少し隠れています。同じスタイル論をfaux -<select>に適用してみませんか？基本的なスタイルは次のようになります。

ul.selectReplacement {
  margin: 0;
  padding: 0;
  height: 1.65em;
  width: 300px;
}
ul.selectReplacement li {
  background: #cf5a5a;
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 11px;
  line-height: 1.7em;
  list-style: none;
  margin: 0;
  padding: 1px 12px;
  width: 276px;
}
ul.selectOpen li {
  display: block;
}
ul.selectOpen li:hover {
  background: #9e0000;
  color: #fff;
}

ここで、「選択された」リスト項目を処理するには、少し巧妙にする必要があります。

ul.selectOpen li {
  display: block;
}
ul.selectReplacement li.selected {
  color: #fff;
  display: block;
}
ul.selectOpen li.selected {
  background: #9e0000;
  display: block;
}
ul.selectOpen li:hover,
ul.selectOpen li.selected:hover {
  background: #9e0000;
  color: #fff;
}

<ul>の：hover擬似クラスを使用して開いていないことに注意してください。代わりに、「selectOpen」としてclass-- ingしています。この理由は2つあります。

  1. CSSは動作用ではなく表示用です。そして
  2. faux -<select>が実際の<select>のように動作するようにするには、単純なマウスオーバーではなくonclickイベントでリストを開く必要があります。

これを実装するために、Suckerfishから学んだことを取得し、動的に各リスト項目の `` onclickevents for the list items. To do this right, we will need the ability to change theonclick`イベントでこのclassを動的に割り当て、削除することにより、独自のJavaScriptに適用して、次の2つのアクションを切り替えることができます：

  1. リストが折りたたまれているときに選択/デフォルトオプションをクリックすると、完全なfaux -<select>が表示されます。そして
  2. リスト項目をクリックして「選択」し、faux -<select>を折りたたみます。

「選択された」classの再割り当て、リスト項目のonclickイベントの再割り当て、およびfaux -<select>の折りたたみを処理するselectMe()という関数を作成します。 ：

元のSuckerfishが教えてくれたように、IEは<a>以外のホバー状態を認識しません。そのため、私たちはそこから学んだことをコードの一部に追加することでそれを説明する必要があります。 onmouseoverイベントとonmouseoutイベントを「selectReplacement」class- ed <ul>およびその<li>sに添付できます。

function selectReplacement(obj) {
  …
  // create list for styling
  var ul = document.createElement('ul');
  ul.className = 'selectReplacement';
  if (window.attachEvent) {
    ul.onmouseover = function() {
      ul.className += ' selHover';
    }
    ul.onmouseout = function() {
      ul.className = 
        ul.className.replace(new RegExp(" selHover\\b"), '');
    }
  }
  …
  for (var i=0; i<opts.length; i++) {
    …
    if (i == selectedOpt) {
      li.className = 'selected';
    }
    if (window.attachEvent) {
      li.onmouseover = function() {
        this.className += ' selHover';
      }
      li.onmouseout = function() {
        this.className = 
          this.className.replace(new RegExp(" selHover\\b"), '');
      }
    }
  ul.appendChild(li);
}

次に、CSSのいくつかのセレクターを変更して、IEのホバーを処理できます。

ul.selectReplacement:hover li,
ul.selectOpen li {
  display: block;
}
ul.selectReplacement li.selected {
  color: #fff;
  display: block;
}
ul.selectReplacement:hover li.selected**,
ul.selectOpen li.selected** {
  background: #9e0000;
  display: block;
}
ul.selectReplacement li:hover,
ul.selectReplacement li.selectOpen,
ul.selectReplacement li.selected:hover {
  background: #9e0000;
  color: #fff;
  cursor: pointer;
}

これで、<select>のように動作するリストができました。ただし、選択したリストアイテムを変更し、関連するフォーム要素の値を更新する手段が必要です。

JavaScript fu

「選択済み」classが既にあり、選択したリストアイテムに適用できますが、クリックすると<li>に適用し、以前の「選択済み」から削除する方法が必要です兄弟。これを実現するJSは次のとおりです。

function selectMe(obj) {
  // get the <li>'s siblings
  var lis = obj.parentNode.getElementsByTagName('li');
  // loop through
  for (var i=0; i<lis.length; i++) {
    // not the selected <li>, remove selected class
    if (lis[i] != obj) {
      lis[i].className='';
    } else { // our selected <li>, add selected class
      lis[i].className='selected';
    }
  }
}

[注：<li>sを完全に制御しているため、単純なclassName割り当てと空化を使用できます。 （何らかの理由で）リスト項目に追加のクラスを割り当てる必要がある場合は、classNameプロパティに「選択された」クラスを追加および削除するようにコードを変更することをお勧めします。

最後に、<select>がクリックされたときに元の<li>（フォームと一緒に送信されます）の値を設定する小さな関数を追加します。

function setVal(objID, selIndex) {
  var obj = document.getElementById(objID);
  obj.selectedIndex = selIndex;
}

その後、これらの関数を<li>sのonclickイベントに追加できます。

…
  for (var i=0; i<opts.length; i++) {
    var li = document.createElement('li');
    var txt = document.createTextNode(opts[i].text);
    li.appendChild(txt);
    li.selIndex = opts[i].index;
    li.selectID = obj.id;
    li.onclick = function() {
      setVal(this.selectID, this.selIndex);
      selectMe(this);
    }
    if (i == selectedOpt) {
      li.className = 'selected';
    }
    ul.appendChild(li);
  }
…

そこにあります。関数faux -. As we have not hidden the originalyet, we can [watch how it behaves](files/4.html) as we choose different options from our faux-. Of course, in the final version, we don't want the originalto show, so we can hide it byclass`を作成しました。これを「置換」として、JSに追加します：

function selectReplacement(obj) {
  // append a class to the select
  obj.className += ' replaced';
  // create list for styling
  var ul = document.createElement('ul');
…

次に、新しいCSSルールを追加して、

select.replaced {
  display: none;
}

デザインを完成させるためにいくつかの画像を適用すると（リンクは利用できません）、私たちは行ってもいいです！

そして、もう1つ link できませんと言っている人がいます。

29
some

外挿してください！ :)

  filter: 
    progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0,color=#FF0000)
    progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0,color=#FF0000)
    progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1,color=#FF0000)
    progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1,color=#FF0000);
23
nemoluca

無効なエントリが選択されたときに境界線を赤にしようとした私の個人的な経験から、IEで選択要素の境界線を赤にすることは不可能です。

前述したように、Internet ExplorerのocntrolはWindowsAPIを使用して描画およびレンダリングを行いますが、これを解決するものは何もありません。

私たちの解決策は、選択要素の背景色を明るい赤にすることでした（テキストを読みやすくするため）。背景色はすべてのブラウザで機能していましたが、IEでは、選択と同じ背景色の要素に副作用がありました。

だから私たちが入れた解決策を要約するために：

select
{
  background-color:light-red;
  border: 2px solid red;
}
option
{
  background-color:white;
}

色は16進コードで設定されていることに注意してください、私はどれを覚えていないだけです。

このソリューションは、IEのボーダー赤以外のすべてのブラウザーで必要な効果をもたらしました。

幸運を

5
jpsimard-nyx

つまり、これと同じ問題を抱えていました。つまり、このメタタグを挿入すると、IEの境界線を編集できるようになりました。

<meta http-equiv="X-UA-Compatible" content="IE=100" >
5
nick

IE7（互換モードのIE8）でselectに境界線を配置できないことを回避しました

パディングと同様に境界線を付けると、何かのように見えます。

すべてではありませんが、それは始まりです...

2
user123746

Border-styleプロパティは、html要素のすべての側面の境界線スタイルを定義する簡略コマンドです。両側に異なるスタイルを設定できます。

http://www.handycss.com/tips/styling-borders-with-css/

2
Nabeela Ansari

IE <8は、ドロップダウンリスト自体をレンダリングせず、この方法でスタイル設定できないウィンドウコントロールのみを使用します。 IE 8から始まります。これは変更され、スタイリングが適用されるようになりました。もちろん、その市場シェアはかなり無視できます。

2
User

Cssのみを使用することはできません。実際、すべてのフォーム要素は、CSSのみを使用してすべてのブラウザーで同じように見えるようにカスタマイズすることは不可能です。 niceforms でも試せます;）

2
Ionuț Staicu

Htmlタグの前にdoctype宣言を追加するだけです

例：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

JSPファイルでも機能します。詳細情報： HTML Doctype Declaration

1
Daniel Costa

私の目的のために、それは私に解決します：

.select-container {
  position:relative;
  width:200px;
  height:18px;
  overflow:hidden;
  border:1px solid white !important
}
.select-container select {
  position:relative;
  left:-2px;
  top:-2px
}

ネストされたdivを使用するには、さらにスタイルを追加する必要があります。

1
Rafael Berlanda

CSSとJavaScriptを備えたカスタムデザインの選択ボックスが必要です。ユーザーがJavaScriptを無効にした場合、標準のselect要素に完全に低下することを絶対に確認する必要があります。

IMO、努力するだけの価値はありません。選択範囲内でフォントスタイリングを使用して、サイトのデザインに近づけます。枠などはボックス要素に残します。

1
cLFlaVA

Select in IEの選択の片側に沿ってボーダーを作成するには、IEのフィルターを使用します。

select.required {border-left：2px赤一色;フィルター：progid：DXImageTransform.Microsoft.dropshadow（OffX = -2、OffY = 0、color =＃FF0000）}

必要なステータスのために、すべての入力の片側にのみ境界線を配置します。

おそらく、万能の境界線により良い仕事をする効果があります...

http://msdn.Microsoft.com/en-us/library/ms532853（v = VS.85）.aspx

1
user90588

できます！！！次のコードを使用します。

<style>
div.select-container{
   border: 1px black;width:200px;
}
</style>


<div id="status" class="select-container">
    <select name="status">
        <option value="" >Please Select...</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
    </select>
</div>
1
Vibin D