Frage IE6 / IE7 CSS-Grenze bei Auswahlelement


Hat jemand eine Lösung, um die Grenzen von "Select" -Elementen in Internet Explorer mit CSS zu gestalten?


31
2017-12-19 03:38


Ursprung


Antworten:


Soweit ich weiß, ist es im IE nicht möglich, weil es die OS-Komponente verwendet.

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

Edit: Der Link ist kaputt Ich lade den Inhalt ab

<select> Etwas Neues, Teil 1

Von Aaron Gustafson

Sie haben also eine schöne, standardkonforme Website mit den neuesten und modernsten Funktionen erstellt Größte CSS-Techniken. Sie beherrschen die Kontrolle über das Styling jedes Elements, aber Im Hinterkopf nagt dir eine kleine Stimme, wie hässlich du bist <select>s sind. Nun, heute werden wir einen Weg finden, das zum Schweigen zu bringen kleine Stimme und vervollständigen unsere Designs wirklich. Mit ein wenig DOM Scripting und Etwas kreatives CSS können Sie auch erstellen <select>s schön ... und du wirst nicht müssen Zugänglichkeit, Benutzerfreundlichkeit oder graziöse Degradierung opfern.

Das Problem

Wir alle kennen die <select> ist einfach nur hässlich. In der Tat versuchen viele, es zu begrenzen Verwenden Sie, um sein klassisches Netz zu vermeiden, um 1994 eingesetzte Grenzen. Wir sollten nicht vermeiden Verwendung der <select> obwohl - es ist ein wichtiger Teil der aktuellen Form Werkzeugset; wir sollten es annehmen. Das heißt, etwas kreatives Denken kann sich verbessern es.

Das <select>

Wir verwenden ein einfaches für unser Beispiel:

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

[Anmerkung: Es ist impliziert, dass dies <select> ist im Kontext eines vollständigen bilden.]

Also haben wir fünf <option>s innerhalb von <select>. Dies <select> hat ein eindeutig zugewiesen id von etwas." Abhängig vom Browser / der Plattform Du siehst es an, dein <select> sieht wahrscheinlich ungefähr so ​​aus:

Ein <select> wie in Windows XP / Firefox 1.0.2 gerendert. http://v2.easy-designs.net/articles/replaceSelect/images/ffSelect.png

oder dieses

Ein <select> wie in Mac OSX / Safari 1.2 gerendert. http://v2.easy-designs.net/articles/replaceSelect/images/safariSelect.png

Nehmen wir an, wir möchten, dass es etwas moderner aussieht, vielleicht so:

Unser Konzept eines freundlich gestylten <select>. http://v2.easy-designs.net/articles/replaceSelect/images/desiredSelect.png

Also, wie machen wir das? Das Grundlegende beibehalten <select> ist keine Option. Außer, abgesondert, ausgenommen grundlegende Hintergrundfarbe, Schriftart und Farbeinstellungen, Sie haben nicht wirklich eine viel Kontrolle über die.

Wir können jedoch die hervorragende Funktionalität von a nachahmen <select> in einer neuen Form Kontrolle ohne Semantik, Usability oder Zugänglichkeit zu opfern. um zu Tun wir das, müssen wir die Natur von a untersuchen <select>.

EIN <select> ist im Wesentlichen eine ungeordnete Liste von Möglichkeiten, in denen Sie können Wählen Sie einen einzelnen Wert aus, der zusammen mit dem Rest eines Formulars übermittelt werden soll. Also, im Wesentlichen, es ist ein <ul> auf Steroiden. Mit dieser Denkweise können wir fortfahren ersetze das <select> mit einer ungeordneten Liste, solange wir es geben erweiterte Funktionalität Wie <ul>s kann in einer Vielzahl von verschiedenen Stilen gestaltet werden Wege, wir sind fast frei Haus. Jetzt lautet die Frage: Wie können wir sicherstellen? Aufrechterhaltung der Funktionalität des <select>bei Verwendung von a <ul>?" In anderen Wörter, wie geben wir den richtigen Wert zusammen mit der Form, wenn wir Verwenden Sie keine Formularsteuerung mehr?

Die Lösung

Geben Sie das DOM ein. Der letzte Schritt in diesem Prozess ist die <ul> Funktion / Gefühl wie a <select>und wir können das mit erreichen JavaScript / ECMA Script und ein wenig cleveres CSS. Hier ist die Grundliste von Anforderungen müssen wir einen funktionalen faux haben <select>:

  • Klicke auf die Liste, um sie zu öffnen.
  • Klicken Sie auf Listenelemente, um den zugewiesenen Wert zu ändern und die Liste zu schließen.
  • zeige den Standardwert, wenn nichts ausgewählt ist, und
  • Zeigen Sie den ausgewählten Listeneintrag an, wenn etwas ausgewählt ist.

Mit diesem Plan können wir beginnen, jeden Teil nacheinander anzugehen.

Erstellen der Liste

Zuerst müssen wir alle Attribute und s aus der  und baue es als ein. Wir erreichen dies, indem wir Folgendes ausführen 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);
}

Vielleicht denken Sie jetzt "Was passiert, wenn es ein ausgewähltes Produkt gibt? <option> schon? "Wir können dies erklären, indem wir eine weitere Schleife hinzufügen, bevor wir das erstellen <li>s nach dem ausgewählten suchen <option>, und speichern Sie diesen Wert dann in um zu bestellen 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 jetzt wird Option 5 ausgewählt, um dies zu demonstrieren Funktionalität.]

Jetzt können wir diese Funktion auf jedem ausführen <select> auf der Seite (in unserem Fall eins) mit folgendem:

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; Lass uns etwas Stil hinzufügen.

Ein bisschen cleveres CSS

Ich weiß nicht wie es euch geht, aber ich bin ein großer Fan von CSS - Drop - downs (besonders der Suckerfisch Vielfalt). Ich war Seit einiger Zeit arbeite ich mit ihnen zusammen und es dämmerte mir schließlich, dass a <select> ist wie ein Dropdown-Menü, wenn auch mit ein wenig mehr weiter unter der Haube. Warum wenden wir nicht die gleiche Stiltheorie an? faux-<select>? Der grundlegende Stil geht ungefähr so:

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 den "ausgewählten" Listenpunkt zu bearbeiten, müssen wir nun ein bisschen raffinierter 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 nicht die Pseudo-Klasse: hover für die <ul> um es zu machen offen, stattdessen sind wir classals "selectOpen". Der Grund dafür ist zweifach:

  1. CSS ist für Präsentation, nicht für Verhalten; und
  2. wir wollen unser Faux-<select> benimm dich wie echt <select>, wir brauchen die Liste in einem öffnen onclick Ereignis und nicht auf einer einfachen Maus über.

Um dies umzusetzen, können wir das, was wir von Suckerfish gelernt haben, anwenden und anwenden unser eigenes JavaScript durch dynamisches Zuweisen und Entfernen dieses class im "Onclickevents for the list items. To do this right, we will need the ability to change theOnclick` Ereignisse für jeden Listeneintrag im laufenden Betrieb zu wechseln zwischen den folgenden zwei Aktionen:

  1. zeige das komplette faux-<select> wenn Sie auf die ausgewählte / Standardoption klicken, wenn die Liste minimiert ist; und
  2. Wählen Sie ein Listenelement aus, wenn Sie darauf klicken und<select>.

Wir werden eine Funktion namens erstellen selectMe() die Neuzuordnung von die gewählte" class, Neuzuweisung der onclick Ereignisse für die Liste Gegenstände, und das Zusammenfallen des Faux-<select>:

Wie der ursprüngliche Suckerfish uns beigebracht hat, wird IE keinen Hover-Zustand erkennen alles außer einem <a>, also müssen wir das durch Vermehrung erklären einige unserer Code mit dem, was wir von ihnen gelernt haben. Wir können onmouseover und anschließen onmouseout Ereignisse zum "selectReplacement" class-ed <ul> und sein <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);
}

Dann können wir einige Selektoren im CSS ändern, um den Hover für 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 folgt verhält <select>; aber wir immer noch brauche ein Mittel, um den ausgewählten Listeneintrag zu ändern und den Wert des Eintrags zu aktualisieren zugehöriges Formularelement

JavaScript fu

Wir haben bereits ein "ausgewählt" class wir können uns auf unseren ausgewählten Listeneintrag bewerben, aber wir brauchen einen Weg, es auf a anzuwenden <li> wenn es angeklickt wird und es von einem seiner zuvor "ausgewählten" Geschwister entfernen. Hier ist das JS um das 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 einfach verwenden className Zuweisung und Entleerung, weil wir drin sind vollständige Kontrolle über die <li>s. Wenn Sie (aus irgendeinem Grund) zuordnen müssen Zusätzliche Klassen zu Ihren Listenelementen, empfehle ich, den Code zu ändern Anhängen und entfernen Sie die "ausgewählte" Klasse zu Ihrem className Eigentum.]

Schließlich fügen wir eine kleine Funktion hinzu, um den Wert des Originals festzulegen <select> (die zusammen mit dem Formular eingereicht werden) wenn ein <li> wird geklickt:

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

Wir können dann diese Funktionen hinzufügen onclick Ereignis unserer <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);
    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 unsere funktionale 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 original to show, so we can hide it byclass-ing es als "ersetzt", Hinzufügen das zum JS hier:

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 das zu verbergen

select.replaced {
  display: none;
}

Mit der Anwendung von ein paar Bildern zum Abschluss der Design (Link nicht verfügbar), wir sind gut zu gehen!


Und hier ist ein anderer Verknüpfung zu jemandem, der sagt, dass es nicht getan werden kann.


29
2017-12-19 03:58



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
2017-07-16 14:38



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

Wie bereits erwähnt, verwendet der Internet Explorer im Internet Explorer WindowsAPI zum Zeichnen und Rendern und Sie haben nichts zu lösen.

Was unsere Lösung war, war, die Hintergrundfarbe von select element hellrot zu setzen (damit Text lesbar ist). Hintergrundfarbe funktionierte in jedem Browser, aber im IE hatten wir eine Nebenwirkung, dass das Element die selbe Hintergrundfarbe wie die select hatte.

Um die Lösung zusammenzufassen:

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

Beachten Sie, dass die Farbe mit Hex-Code eingestellt wurde, ich erinnere mich einfach nicht daran.

Diese Lösung gab uns den gewünschten Effekt in jedem Browser außer dem Rand rot in IE.

Viel Glück


5
2017-12-19 21:11



Ich hatte das gleiche Problem mit ie, dann habe ich dieses Meta-Tag eingefügt und es mir erlaubt, die Grenzen in ie zu bearbeiten

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

5
2018-04-05 23:40



NUR mit css zu arbeiten ist unmöglich. Tatsächlich können alle Formularelemente nicht so angepasst werden, dass sie in allen Browsern nur mit css aussehen. Du kannst es versuchen nette Formen obwohl;)


2
2017-12-19 20:47



IE <8 rendert die Dropdown-Liste selbst nicht, 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 relativ unbedeutend.


2
2018-06-16 13:15



Ich habe um die Unfähigkeit gearbeitet, einen Rahmen an die Auswahl in IE7 (IE8 im Kompatibilitätsmodus) zu setzen

Indem es eine Grenze sowie eine Polsterung gibt, sieht es wie etwas aus ....

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


2
2018-06-16 14:52



Schau dir diesen Code an ... hoffe, dass du glücklich bist :)

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

Sajay


2
2018-06-16 13:11



Die Eigenschaft border-style ist ein Kurzbefehl, um die Rahmenstile aller Seiten als HTML-Element zu definieren. Jede Seite kann einen anderen Stil haben.

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


2
2018-05-09 08:09



Sie benötigen eine benutzerdefinierte Auswahlbox mit CSS und JavaScript. Sie müssen unbedingt sicherstellen, dass es sich perfekt zu einem standardmäßigen Select-Element verschlechtert, wenn ein Benutzer JavaScript deaktiviert hat.

IMO, es ist einfach nicht die Mühe wert. Bleiben Sie bei der Auswahl in den Schriftarten, um sie an das Design Ihrer Website anzupassen. Verlasse die Rahmen usw. zu den Box-Elementen.


1
2017-12-19 04:02