31

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

4

14 に答える 14

29

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

これはコントロールが置き換えられるリンクですが、それがあなたのやりたいことかどうかはわかりません。

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

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

アーロン・グスタフソン

これで、最新かつ最高の CSS 技術を利用して、標準に準拠した美しいサイトを構築できました。あなたはすべての要素のスタイリングをコントロールできるようになりましたが、心の奥底では、あなた <select>の がいかに醜いのか、小さな声があなたを悩ませています。さて、今日はその小さな声を黙らせて、デザインを真に完成させる方法を探っていきます。少しの DOM スクリプトといくつかのクリエイティブな CSS を使用して、あなたも を<select>美しくすることができます…そして、アクセシビリティ、ユーザビリティ、または適切なデグラデーションを犠牲にする必要はありません。

問題

私たちは皆、それ<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>おおよそ次のようになります。

Windows XP/Firefox 1.0.2 でレンダリングされた <select>。
(出典: easy-designs.net )

またはこれ

Mac OSX/Safari 1.2 でレンダリングされた <select>。
(出典: easy-designs.net )

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

素敵なスタイルの <select> のコンセプトです。
(出典: easy-designs.net )

では、どうすればよいのでしょうか。基本を維持する<select>ことはオプションではありません。基本的な背景色、フォント、および色の調整を除けば、.

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

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

ソリューション

DOM を入力します。プロセスの最後のステップは、<ul> 関数/フィールを のようにする<select>ことです。これは、JavaScript/ECMA スクリプトと少し巧妙な CSS を使用して実現できます。以下は、機能的な faux を持つために必要な要件の基本的なリストです<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を作成して selected を検索する前に別のループを追加 し、selectedを「selected」として<option>格納するためにその値を保存します。class<li>

…
  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>、フードの下でもう少し進んでいますが、a はドロップダウンメニューにほとんど似ていることにようやく気づきました。同じ文体理論を私たちの偽物に適用してみません<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;
}

:hover 疑似クラスを使用し<ul>て開くのではなくclass、「selectOpen」として使用していることに注意してください。これには次の 2 つの理由があります。

  1. CSS は表示用であり、動作用ではありません。と
  2. 偽物<select>が本物のように動作するようにするには、単純なマウスオーバーではなく<select>、イベントでリストを開く必要があります。onclick

これを実装するには、Suckerfish から学んだことを独自の JavaScript に適用します。次の 2 つのアクションをオンザフライで切り替えて、各リスト項目のclass「onclick onclick」イベントでこれを動的に割り当ておよび削除します。events for the list items. To do this right, we will need the ability to change the

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

selectMe()"selected"classの再割り当てonclick、リスト項目のイベントの再割り当て、および faux- の折りたたみを処理するために呼び出される関数を作成します<select>。

元の Suckerfish が教えてくれたように、IE は 以外のホバー状態を認識しない<a>ため、そこから学んだことでコードの一部を拡張することで、これを説明する必要があります。onmouseover および onmouseout イベントを "selectReplacement" とその s にアタッチclassでき<ul>ます <li>。

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 風

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';
    }
  }
}

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

最後に、がクリック<select> されたときにオリジナル (フォームとともに送信される)の値を設定する小さな関数を追加します。<li>

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

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

…
  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);
  }
…

そこにあります。機能的な偽クラスを作成し、. 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 original to show, so we can hide it byそれを「置換」して、次の 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;
}

いくつかの画像を適用してデザインを完成させたら (リンクは利用できません)、準備完了です!

そして、これはできないと言っている誰かへの別のリンクです。

于 2008-12-19T03:58:42.433 に答える
23

それを推測してください！:)

  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);
于 2010-07-16T14:38:28.893 に答える
5

ieで同じ問題が発生していたので、このメタタグを挿入すると、ieの境界線を編集できるようになりました。

<meta http-equiv="X-UA-Compatible" content="IE=100" >
于 2011-04-05T23:40:38.120 に答える
5

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

前に述べたように、Internet Explorer のコントロールは WindowsAPI を使用して描画とレンダリングを行いますが、これを解決する方法はありません。

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

したがって、私たちが入れたソリューションを要約すると：

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

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

このソリューションは、IE の赤い境界線を除いて、すべてのブラウザーで必要な効果をもたらしました。

幸運を

于 2008-12-19T21:11:29.147 に答える
2

このコードをチェックしてください...あなたの幸せを願っています:)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<style type="text/css">
*{margin:0;padding:0;}
select {font: normal 13px Arial, SansSerif, Verdana; color: black;}
.wrapper{width:198px; position: relative;  height: 20px; overflow: hidden; border-top:1px solid #dddddd; border-left:1px solid #dddddd;}
.Select{color: black; background: #fff;position: absolute; width: 200px; top: -2px; left: -2px;}
optgroup{background-color:#0099CC;color:#ffffff;}
</style>
</head>

<body>
<div class="wrapper">
<select class="Select">
<optgroup label="WebDevelopment"></optgroup>
<option>ASP</option>
<option>PHP</option>
<option>ColdFusion</option>
<optgroup label="Web Design"></optgroup>
<option>Adobe Photoshop</option>
<option>DreamWeaver</option>
<option>CSS</option>
<option>Adobe Flash</option>
</select>
</div>
</body>
</html>

サジェイ

于 2009-06-16T13:11:35.413 に答える
2

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

于 2009-06-16T13:15:58.290 に答える
2

border-style プロパティは、html 要素のすべての辺の境界線スタイルを定義する簡単なコマンドです。各面は異なるスタイルを持つことができます。

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

于 2012-05-09T08:09:43.467 に答える
2

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

于 2008-12-19T20:47:05.873 に答える
2

IE7（互換モードのIE8）で選択に境界線を付けることができないことを回避しました

パディングと同様にボーダーを与えることで、何かのように見えます....

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

于 2009-06-16T14:52:28.687 に答える
1

IEで選択の片側に沿って境界線を作成するには、IEのフィルターを使用します。

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

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

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

http://msdn.microsoft.com/en-us/library/ms532853(v=VS.85).aspx

于 2010-05-18T22:11:46.577 に答える
1

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

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

JSPファイルでも機能します。詳細情報: HTML Doctype 宣言

于 2011-01-16T22:10:38.270 に答える
1

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

.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 を使用するには、より多くのスタイルを設定する必要があります。

于 2010-02-27T18:08:23.330 に答える
1

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

<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>
于 2011-03-09T16:38:53.670 に答える
1

CSS と JavaScript でカスタム設計された選択ボックスが必要です。ユーザーが JavaScript を無効にしている場合、標準の select 要素に完全に分解されることを絶対に確認する必要があります。

IMO、努力する価値はありません。サイトのデザインに近づけるために、select 内のフォント スタイルに固執します。境界線などはボックス要素に任せます。

于 2008-12-19T04:02:14.003 に答える