it-swarm.com.de

IE6 / IE7 CSS-Rahmen am ausgewählten Element

Hat jemand eine Lösung für die Gestaltung der Ränder von "ausgewählten" Elementen in Internet Explorer mit CSS?

31
codegy

Soweit ich weiß, ist dies in IE nicht möglich, da die OS-Komponente verwendet wird.

Hier ist ein Link , wo das Steuerelement ersetzt wird, aber ich weiß nicht, ob Sie das tun möchten.

Bearbeiten: Der Link ist kaputt Ich lösche den Inhalt

<select> Etwas Neues, Teil 1

Von Aaron Gustafson

Sie haben also eine schöne, standardkonforme Website mit den neuesten und besten CSS-Techniken erstellt. Sie haben die Kontrolle über das Styling jedes Elements erlangt, aber im Hinterkopf nörgelt Sie eine kleine Stimme darüber, wie hässlich Ihre <select> Sind. Nun, heute werden wir einen Weg suchen, diese kleine Stimme zum Schweigen zu bringen und unsere Entwürfe wirklich zu vervollständigen. Mit ein wenig DOM-Scripting und kreativem CSS können auch Sie Ihren <select> Ansprechend gestalten. Sie müssen dabei nicht auf Barrierefreiheit, Benutzerfreundlichkeit oder eine angemessene Verschlechterung verzichten.

Das Problem

Wir alle wissen, dass <select> Einfach hässlich ist. Tatsächlich versuchen viele, seine Verwendung einzuschränken, um die klassischen Einfügungsgrenzen des Netzes von ca. 1994 zu vermeiden. Die Verwendung von <select> Sollte jedoch nicht vermieden werden - dies ist ein wichtiger Bestandteil des aktuellen Formular-Toolset. wir sollten es annehmen. Das heißt, ein kreatives Denken kann es verbessern.

Der <select>

Für unser Beispiel verwenden wir ein einfaches:

<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>

[Hinweis: Es wird vorausgesetzt, dass sich dieses <select> Im Kontext eines vollständigen Formulars befindet.]

Wir haben also fünf <option> Innerhalb eines <select>. Diesem <select> Ist eindeutig id "etwas" zugewiesen. Abhängig von dem Browser/der Plattform, auf der/der Sie es anzeigen, sieht Ihr <select> Wahrscheinlich ungefähr so ​​aus:

A <select> as rendered in Windows XP/Firefox 1.0.2.
(Quelle: easy-designs.net )

oder dieses

A <select> as rendered in Mac OSX/Safari 1.2.
(Quelle: easy-designs.net )

Nehmen wir an, wir möchten es ein bisschen moderner machen, vielleicht so:

Our concept of a nicely-styled <select>.
(Quelle: easy-designs.net )

Wie machen wir das? Das Beibehalten des Basiscodes <select> Ist keine Option. Abgesehen von den grundlegenden Einstellungen für Hintergrundfarbe, Schriftart und Farbe haben Sie nicht wirklich viel Kontrolle über die.

Wir können jedoch die hervorragende Funktionalität eines <select> In einem neuen Formular-Steuerelement nachahmen, ohne auf Semantik, Benutzerfreundlichkeit oder Zugänglichkeit verzichten zu müssen. Dazu müssen wir die Art eines <select> Untersuchen.

Ein <select> Ist im Wesentlichen eine ungeordnete Auswahlliste, in der Sie einen einzelnen Wert auswählen können, der zusammen mit dem Rest eines Formulars gesendet werden soll. Im Wesentlichen handelt es sich also um einen <ul> Für Steroide. In diesem Sinne können wir den <select> Durch eine ungeordnete Liste ersetzen, sofern wir ihm einige erweiterte Funktionen geben. Da <ul> Auf unzählige Arten gestaltet werden können, sind wir fast frei zu Hause. Nun werden die Fragen "Wie kann sichergestellt werden, dass die Funktionalität des <select> Bei Verwendung eines <ul> Beibehalten wird?" Mit anderen Worten, wie übermitteln wir den korrekten Wert zusammen mit dem Formular, wenn wir kein Formularsteuerelement mehr verwenden?

Die Lösung

Betritt das DOM. Der letzte Schritt in diesem Prozess besteht darin, die Funktion <ul> So zu machen, dass sie sich wie ein <select> Anfühlt. Dies können wir mit JavaScript/ECMA-Skript und ein wenig cleverem CSS erreichen. Hier ist die grundlegende Liste der Anforderungen, die wir benötigen, um einen funktionalen Faux <select> Zu haben:

  • klicken Sie auf die Liste, um sie zu öffnen.
  • klicken Sie auf Listenelemente, um den zugewiesenen Wert zu ändern und die Liste zu schließen.
  • den Standardwert anzeigen, wenn nichts ausgewählt ist, und
  • zeigt das ausgewählte Listenelement an, wenn etwas ausgewählt ist.

Mit diesem Plan können wir beginnen, jedes Teil nacheinander in Angriff zu nehmen.

Liste erstellen

Also müssen wir zuerst alle Attribute und s aus dem sammeln und es als neu erstellen. Dies erreichen wir durch Ausführen des folgenden 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);
}

Sie denken vielleicht: "Was passiert jetzt, wenn bereits ein <option> Ausgewählt ist?" Wir können dies berücksichtigen, indem wir eine weitere Schleife hinzufügen, bevor wir die <li> Erstellen, um nach dem ausgewählten <option> Zu suchen, und diesen Wert dann speichern, um class unser ausgewähltes <li> Als "ausgewählt":

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

[Hinweis: Ab hier wird Option 5 ausgewählt, um diese Funktionalität zu demonstrieren.]

Jetzt können wir diese Funktion für jeden <select> Auf der Seite ausführen (in unserem Fall für einen):

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

Wir sind fast da; Lassen Sie uns etwas Stil hinzufügen.

Einige clevere CSS

Ich weiß nichts über dich, aber ich bin ein großer Fan von CSS-Dropdowns (insbesondere der Suckerfish -Variante). Ich arbeite jetzt schon seit einiger Zeit mit ihnen und es wurde mir klar, dass ein <select> So ziemlich wie ein Dropdown-Menü ist, wenn auch ein bisschen mehr unter der Haube. Warum nicht die gleiche stilistische Theorie auf unser Faux anwenden - <select>? Der grundlegende Stil sieht ungefähr so ​​aus:

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

Um nun mit dem "ausgewählten" Listenelement fertig zu werden, müssen wir ein wenig schlauer werden:

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

Beachten Sie, dass wir die: hover-Pseudoklasse für den <ul> Nicht verwenden, um sie zu öffnen, sondern stattdessen class- als "selectOpen". Dies hat zwei Gründe:

  1. CSS dient der Präsentation, nicht dem Verhalten. und
  2. wir möchten, dass unser Faux - <select> sich wie ein echter <select> verhält. Wir benötigen die Liste, um in einem onclick -Ereignis und nicht bei einem einfachen Mouseover geöffnet zu werden.

Um dies zu implementieren, können wir das, was wir von Suckerfish gelernt haben, auf unser eigenes JavaScript anwenden, indem wir dieses class in `` onclick events for the list items. To do this right, we will need the ability to change the Onclick` -Ereignissen für jedes Listenelement im dynamisch zuweisen und entfernen Fliege, um zwischen den folgenden zwei Aktionen zu wechseln:

  1. zeigen Sie den vollständigen Faux an - <select>, wenn Sie auf die ausgewählte/Standardoption klicken, wenn die Liste reduziert ist. und
  2. "wähle" einen Listeneintrag aus, wenn er angeklickt wird und reduziere den Faux - <select>.

Wir werden eine Funktion namens selectMe() erstellen, um die Neuzuweisung des "ausgewählten" class, die Neuzuweisung der onclick -Ereignisse für die Listenelemente und das Reduzieren des Imitats zu handhaben - <select>:

Wie der ursprüngliche Suckerfish uns gelehrt hat, erkennt IE) keinen Schwebezustand auf etwas anderem als einem <a>, Daher müssen wir dies berücksichtigen, indem wir einen Teil unseres Codes mit was erweitern Wir haben aus ihnen gelernt. Wir können Ereignisse onmouseover und onmouseout an die Ereignisse "selectReplacement" class-ed <ul> und ihre <li> anhängen:

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

Dann können wir einige Selektoren im CSS modifizieren, um den Schwebeflug für den IE zu handhaben:

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

Jetzt haben wir eine Liste, die sich wie ein <select> Verhält. Wir benötigen jedoch weiterhin eine Möglichkeit, das ausgewählte Listenelement zu ändern und den Wert des zugeordneten Formularelements zu aktualisieren.

JavaScript fu

Wir haben bereits ein "ausgewähltes" class, das wir auf unser ausgewähltes Listenelement anwenden können, aber wir brauchen eine Möglichkeit, es auf ein <li> Anzuwenden, wenn es angeklickt und von einem beliebigen entfernt wird seiner zuvor "ausgewählten" Geschwister. Hier ist der JS, um dies zu erreichen:

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

[Hinweis: Wir können die einfache className Zuweisung und Entleerung verwenden, da wir die vollständige Kontrolle über die <li> Haben. Wenn Sie (aus irgendeinem Grund) Ihren Listenelementen zusätzliche Klassen zuweisen mussten, empfehle ich, den Code so zu ändern, dass die "ausgewählte" Klasse an Ihre className -Eigenschaft angehängt und entfernt wird.]

Schließlich fügen wir eine kleine Funktion hinzu, um den Wert des Originals <select> (Das zusammen mit dem Formular gesendet wird) festzulegen, wenn auf <li> Geklickt wird:

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

Wir können diese Funktionen dann zum Ereignis onclick unserer <li> Hinzufügen:

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

Hier hast du es. Wir haben unseren funktionalen Faux erstellt - . 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 by, Indem wir ihn als "ersetzt" klassifizieren und das hier dem JS hinzufügen:

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

Fügen Sie dann eine neue CSS-Regel hinzu, um die auszublenden

select.replaced {
  display: none;
}

Mit der Anwendung einiger Bilder zur Fertigstellung des Designs (Link nicht verfügbar) kann es losgehen!


Und hier ist noch ein Link für jemanden, der sagt, dass das nicht geht.

29
some

extrapoliere es! :)

  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

Aus meiner persönlichen Erfahrung, in der wir versucht haben, den Rand rot zu setzen, als ein ungültiger Eintrag ausgewählt wurde, ist es unmöglich, den Rand rot des ausgewählten Elements im IE zu setzen.

Wie bereits erwähnt, verwenden die Steuerelemente im Internet Explorer WindowsAPI zum Zeichnen und Rendern, und Sie haben nichts, um dies zu lösen.

Unsere Lösung bestand darin, die Hintergrundfarbe des ausgewählten Elements hellrot zu setzen (damit der Text lesbar ist). Die Hintergrundfarbe funktionierte in jedem Browser, aber in IE) hatten wir einen Nebeneffekt, dass das Element dieselbe Hintergrundfarbe hatte wie das ausgewählte.

Um die Lösung zusammenzufassen, die wir geputtet haben:

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

Beachten Sie, dass die Farbe mit Hex-Code eingestellt wurde, ich weiß nur nicht mehr, welche.

Diese Lösung hat uns in jedem Browser den gewünschten Effekt beschert, mit Ausnahme des roten Rahmens im IE.

Viel Glück

5
jpsimard-nyx

ich hatte das gleiche Problem mit dh, dann habe ich dieses Meta-Tag eingefügt und es erlaubte mir, die Rahmen in dh zu bearbeiten

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

Ich habe die Unfähigkeit umgangen, in IE7 einen Rahmen für die Auswahl zu setzen (IE8 im Kompatibilitätsmodus)

Wenn man ihm einen Rand sowie eine Polsterung gibt, sieht es aus wie etwas ....

Nicht alles, aber es fängt an ...

2
user123746

Die Eigenschaft border-style ist ein Kurzbefehl zum Definieren der Rahmenstile aller Seiten eines HTML-Elements. Jede Seite kann einen anderen Stil haben.

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

2
Nabeela Ansari

IE <8 rendert die Dropdown-Liste nicht selbst, sondern verwendet nur das Windows-Steuerelement, das auf diese Weise nicht formatiert werden kann. Ab IE 8 hat sich dies geändert und das Styling wird nun angewendet. Natürlich ist sein Marktanteil noch eher vernachlässigbar.

2
User

Es ist unmöglich, NUR CSS zu verwenden. Tatsächlich können nicht alle Formularelemente so angepasst werden, dass sie nur mit CSS in allen Browsern gleich aussehen. Sie können versuchen niceforms obwohl;)

2
Ionuț Staicu

Fügen Sie einfach eine Doctype-Deklaration vor dem HTML-Tag ein

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

Es wird auch in JSP-Dateien funktionieren. Für weitere Informationen: HTML Doctype Declaration

1
Daniel Costa

Für meine Zwecke löst es für mich:

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

Um mehr Stil zu setzen, müssen verschachtelte Divs verwendet werden.

1
Rafael Berlanda

Sie benötigen eine benutzerdefinierte Auswahlbox mit CSS und JavaScript. Sie müssen unbedingt sicherstellen, dass es sich perfekt zu einem Standardauswahlelement verschlechtert, wenn ein Benutzer JavaScript deaktiviert hat.

IMO, die Mühe lohnt sich einfach nicht. Halten Sie sich an die Schriftstile in der Auswahl, um sie an das Design Ihrer Site anzupassen. Überlassen Sie die Ränder usw. den Feldelementen.

1
cLFlaVA

Um einen Rand entlang einer Seite einer Auswahl in IE zu machen, verwenden Sie die IE-Filter:

select.required {border-left: 2px solid red; filter: progid: DXImageTransform.Microsoft.dropshadow (OffX = -2, OffY = 0, color = # FF0000)}

Ich habe nur eine Seite aller meiner Eingaben für den erforderlichen Status umrandet.

Es gibt wahrscheinlich Effekte, die für eine allseitige Grenze einen besseren Job machen ...

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

1
user90588

Es klappt!!! Verwenden Sie den folgenden Code:

<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