IE6/IE7 css frontière sélectionner l'élément

Question

Quelqu'un aurait-il une solution pour le style de l'frontières de sélectionner des éléments dans Internet Explorer à l'aide de CSS?

Answer 1

Autant que je sache, il n'est pas possible dans IE car il utilise le composant de système d'exploitation.

Voici un lien où le contrôle est remplacé, mais je ne sais pas si c'est ce que vous voulez faire.

Edit: Le lien est cassé je suis dumping le contenu

<select> Quelque Chose De Nouveau, Partie 1

Par Aaron Gustafson

Donc, vous avez construit une belle, conforme aux normes de site en utilisant la plus récente et les plus grands des techniques CSS. Vous avez maîtrisé de contrôle de style de chaque élément, mais dans le dos de votre esprit, une petite voix lancinante vous sur la façon moche de votre <select>s sont. Eh bien, aujourd'hui nous allons découvrir un moyen de silence qui peu de voix et vraiment complète de nos conceptions. Avec un peu de DOM scripting et certains créatif, CSS, vous aussi, vous pouvez faire votre <select>s belle... et vous n'aurez pas sacrifier l'accessibilité, la convivialité ou la dégradation gracieuse.

Le Problème

Nous savons tous l' <select> est tout simplement laid. En fait, beaucoup essaient de limiter son de l'utiliser pour éviter sa web classique circa 1994 encart frontières. Nous ne devrions pas éviter à l'aide de l' <select> si--c'est une partie importante de la forme actuelle jeu d'outils; nous devons l'accepter. Cela dit, un peu de réflexion créative peut améliorer c'.

L' <select>

Nous allons utiliser un simple pour notre exemple:

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

[Note: Il est implicite que c' <select> est dans le contexte d'un forme.]

Nous avons donc cinq <option>s dans un <select>. Cette <select> a un attribués id de "quelque chose". Selon le navigateur/plate-forme vous l'affichez sur votre <select> de chances ressemble à peu près comme ceci:

ou cette

Disons que nous voulons pour le faire paraître un peu plus moderne, peut-être comme ceci:

Alors, comment faisons-nous? En gardant la base <select> n'est pas une option. En dehors de de base de la couleur de fond, la police et les réglages de couleur, vous n'avez pas vraiment beaucoup de contrôle sur l' .

Cependant, on peut imiter les superbes fonctionnalités d'un <select> sous une nouvelle forme contrôle sans sacrifier la sémantique, d'utilisabilité et d'accessibilité. Afin de faire, nous avons besoin d'examiner la nature d'un <select>.

Un <select> est, essentiellement, une liste non-ordonnée de choix dans laquelle vous pouvez choisissez une valeur unique pour présenter le long avec le reste du formulaire. Donc, en substance, c'est un <ul> sur les stéroïdes. En continuant avec cette ligne de pensée, nous pouvons remplacer l' <select> avec une liste non-ordonnée, aussi longtemps que nous le donner des fonctionnalités améliorées. En tant que <ul>s peuvent être de style dans une myriade de différentes façons, nous sommes presque à la maison gratuitement. Maintenant, les questions devient "comment s'assurer que nous maintenir la fonctionnalité de l' <select> lors de l'utilisation d'un <ul>?" Dans d'autres mots, comment pouvons-nous présenter la valeur correcte avec la forme, si nous n'utilisez plus, une forme de contrôle?

La solution

Entrer dans le DOM. L'étape finale dans le processus de prise de l' <ul> fonction/se sentir comme un <select>, et nous pouvons accomplir cela avec JavaScript/ECMA Script et un peu intelligent CSS. Voici la liste de base de exigences, nous devons avoir une fonctionnelle faux - <select>:

• cliquez sur la liste pour l'ouvrir,
• cliquez sur les éléments de la liste pour modifier la valeur assignée et fermer la liste,
• montrer la valeur par défaut lorsque rien n'est sélectionné, et
• afficher la liste choisie élément lorsqu'un élément est sélectionné.

Avec ce plan, nous pouvons commencer à s'attaquer à chaque partie dans la succession.

Création de la liste

Alors d'abord, nous avons besoin de collecter tous les attributs et les s de la et de le reconstruire en tant que . Nous accomplissons cela en exécutant la commande suivante 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);
}

Vous pensez peut-être "maintenant ce qui se passe si il est sélectionné <option> déjà?" Nous pouvons expliquer cela par l'ajout d'une autre boucle avant de nous créer l' <li>s pour regarder pour l' <option>, puis de stocker cette valeur dans afin d' class nos <li> sélectionné:

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

[Note: à Partir de maintenant, l'option 5 sera choisi, pour illustrer cette la fonctionnalité.]

Maintenant, nous pouvons exécuter cette fonction sur chaque <select> sur la page (dans notre cas, un) par le suivant:

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

Nous sommes près de là; nous allons ajouter un peu de style.

Astucieux CSS

Je ne sais pas pour vous, mais je suis un grand fan de CSS listes déroulantes (en particulier le Suckerfish variété). J'ai été en travaillant avec eux pour un certain temps maintenant et il est enfin levé sur moi qu'un <select> est un peu comme un menu déroulant, mais avec un peu plus de se cache sous le capot. Pourquoi ne pas appliquer le même stylistique de la théorie à la notre faux-<select>? Le style de base va quelque chose comme ceci:

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

Maintenant, pour gérer les "sélectionnés" élément de la liste, nous avons besoin d'obtenir un peu plus futée:

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

Notez que nous ne sommes pas à l'aide de l' :hover pseudo-classe pour l' <ul> à le faire ouvrir, au contraire, nous devons class-ing comme "selectOpen". La raison pour cela est deux fois:

1. CSS pour la présentation, pas de comportement; et
2. nous voulons que nos faux-<select> se comporter comme un vrai <select>, nous avons besoin de la liste pour l'ouvrir dans une onclick événement et non pas sur un simple survol de la souris.

Pour ce faire, nous pouvons prendre ce que nous avons appris de Suckerfish et de l'appliquer à nos propres JavaScript par l'affectation dynamique et l'élimination de cette classdans `onclick événements pour les éléments de la liste. Pour ce faire, nous avons besoin de l' possibilité de changer de onclick événements pour chaque élément de la liste à la volée pour passer entre les deux actions suivantes:

1. afficher entièrement faux-<select> lors d'un clic sur la sélection ou l'option par défaut lorsque la liste est réduite; et
2. "sélectionner" un élément de la liste quand il est cliqué & effondrement du faux-<select>.

Nous allons créer une fonction appelée selectMe() à la poignée de la réaffectation de la "sélection" class, la réaffectation de l' onclick des événements de la liste les éléments, et l'effondrement de la fausse-<select>:

Comme l'original Suckerfish nous a enseigné, c'est à dire ne reconnaîtra pas un état de pointage sur quelque chose en dehors de l' <a>, nous avons donc besoin de tenir compte de cela en augmentant certains de nos code avec ce que nous avons appris d'eux. Nous pouvons joindre onmouseover et onmouseout événements de la "selectReplacement" classed- <ul> et son <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);
}

Ensuite, on peut modifier quelques sélecteurs dans le CSS, pour gérer le hover pour 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;
}

Maintenant, nous avons une liste de se comporter comme un <select>; mais nous avons encore besoin d'un moyen de modification de l'élément de liste sélectionné et la mise à jour de la valeur de la associé élément de formulaire.

JavaScript fu

Nous avons déjà un "sélectionné" class nous pouvons appliquer à notre sélection élément de la liste, mais nous avons besoin d'un moyen d'aller sur l'appliquant à un <li> lorsqu'il est cliqué sur et de le retirer à partir de son "sélectionné" les frères et sœurs. Voici le JS pour ce faire:

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

[Note: on peut utiliser de simples className affectation et de la vidange, car nous sommes dans contrôle complet de l' <li>s. Si vous (pour certaines raisons) nécessaire pour affecter les classes supplémentaires à la liste de vos éléments, je recommande de modifier le code de l'ajout et la suppression de la "sélection" de la classe à vos className de la propriété.]

Enfin, nous ajoutons un peu de fonction pour définir la valeur de l'original <select> (qui va être soumis avec le formulaire) lorsqu'un <li> est cliqué:

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

Nous pouvons alors ajouter ces fonctions à l' onclick événement de notre - <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);
  }
…

Il vous en avez. Nous avons créé notre fonctionnelles 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 byde la classe`-ing comme "remplacé", ajoutant qu'à la JS ici:

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

Ensuite, ajouter une nouvelle règle CSS pour masquer la

select.replaced {
  display: none;
}

Avec l'application de quelques images pour finaliser le conception (lien non disponible) , nous sommes bon pour vous!

---

Et voici un autre lien pour quelqu'un qui dit qu'il ne peut pas être fait.

Answer 2

extrapoler il! :)

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

Answer 3

De mon expérience personnelle où nous avons essayé de mettre de la frontière en rouge lorsqu'une entrée non valide a été sélectionné, il est impossible de mettre de la bordure rouge de sélectionner l'élément dans IE.

Comme l'a dit avant le ocntrols dans internet explorer utilise WindowsAPI à dessiner et à rendre et vous n'avez rien pour les résoudre.

Ce qui a été notre solution a été de mettre la couleur de fond de sélectionner l'élément de la lumière rouge (pour le texte soit lisible). couleur d'arrière-plan a été de travailler dans tous les navigateurs, mais sous IE, on a eu des effets secondaires que l'élément où la même couleur de fond que la sélectionner.

Donc, pour résumer, la solution nous est posée :

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

Notez que la couleur a été définie avec le code hex, je ne me souviens pas qui.

Cette solution a été de nous donner l'effet recherché dans tous les navigateurs sauf pour la bordure rouge dans IE.

Bonne chance

Answer 4

j'ai eu ce même problème avec ie, puis j'ai inséré cette balise meta et il m'a permis de modifier les frontières dans ie

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

Answer 5

En utilisant UNIQUEMENT css est impossbile. En fait, tous les éléments de formulaire sont impossibles à personnaliser pour regarder de la même manière sur tous les navigateurs uniquement avec du css. Vous pouvez essayer de niceforms bien ;)