web-dev-qa-db-fra.com

Bordure css IE6 / IE7 sur l'élément sélectionné

Quelqu'un a-t-il une solution pour styliser les bordures des éléments "select" dans Internet Explorer en utilisant CSS?

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

Pour autant que je sache, ce n'est pas possible dans IE car il utilise le composant OS.

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 vide le contenu

<select> Quelque chose de nouveau, partie 1

Par Aaron Gustafson

Vous avez donc construit un site magnifique et conforme aux normes en utilisant les dernières et meilleures techniques CSS. Vous maîtrisez le contrôle du style de chaque élément, mais au fond de votre esprit, une petite voix vous harcèle sur la laideur de vos <select>s. Eh bien, aujourd'hui, nous allons explorer un moyen de faire taire cette petite voix et de vraiment compléter nos créations. Avec un peu de script DOM et quelques CSS créatifs, vous pouvez aussi rendre votre <select>s magnifique… et vous n'aurez pas à sacrifier l'accessibilité, l'utilisabilité ou la dégradation gracieuse.

Le problème

Nous savons tous que le <select> est tout simplement laid. En fait, beaucoup essaient de limiter son utilisation pour éviter ses bordures d'encart Web classiques vers 1994. Nous ne devons cependant pas éviter d'utiliser le <select> - c'est une partie importante du jeu d'outils de formulaire actuel; nous devons l'accepter. Cela dit, une réflexion créative peut l'améliorer.

Le <select>

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

[Remarque: Il est sous-entendu que ce <select> est dans le contexte d'un formulaire complet.]

Nous avons donc cinq <option>s dans un <select>. Ce <select> possède un id de "quelque chose". Selon le navigateur/la plate-forme sur laquelle vous le consultez, votre <select> ressemble probablement à ceci:

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

ou ca

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

Disons que nous voulons le rendre un peu plus moderne, peut-être comme ceci:

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

Alors comment le fait-on? Garder le <select> de base n'est pas une option. Mis à part les réglages de base de la couleur d'arrière-plan, de la police et des couleurs, vous n'avez pas vraiment beaucoup de contrôle sur.

Cependant, nous pouvons imiter la superbe fonctionnalité d'un <select> dans un nouveau contrôle de formulaire sans sacrifier la sémantique, l'utilisabilité ou l'accessibilité. Pour ce faire, nous devons examiner la nature d'un <select>.

Un <select> est, essentiellement, une liste de choix non ordonnée dans laquelle vous pouvez choisir une seule valeur à soumettre avec le reste d'un formulaire. Donc, en substance, c'est un <ul> sur les stéroïdes. En poursuivant dans cette voie, nous pouvons remplacer le <select> par une liste non ordonnée, tant que nous lui donnons des fonctionnalités améliorées. Comme <ul>s peut être stylé d'une multitude de façons différentes, nous sommes presque à la maison. Maintenant, la question devient "comment s'assurer que nous maintenons la fonctionnalité de <select> lors de l'utilisation d'un <ul>?" En d'autres termes, comment pouvons-nous soumettre la valeur correcte avec le formulaire, si nous n'utilisons plus un contrôle de formulaire?

La solution

Entrez le DOM. La dernière étape du processus consiste à faire de la fonction <ul> une impression de <select>, et nous pouvons le faire avec JavaScript/ECMA Script et un peu de CSS intelligent. Voici la liste de base des exigences dont nous avons besoin pour avoir un faux <select> fonctionnel:

  • cliquez sur la liste pour l'ouvrir,
  • cliquez sur les éléments de la liste pour modifier la valeur attribuée et fermer la liste,
  • afficher la valeur par défaut lorsque rien n'est sélectionné, et
  • afficher l'élément de liste choisi lorsque quelque chose est sélectionné.

Avec ce plan, nous pouvons commencer à aborder chaque partie successivement.

Construire la liste

Donc, nous devons d'abord collecter tous les attributs et tous les s et les reconstruire en tant que. Nous accomplissons cela en exécutant le JS suivant:

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, que se passe-t-il s'il y a déjà un <option> sélectionné?" Nous pouvons en tenir compte en ajoutant une autre boucle avant de créer le <li>s pour rechercher le <option> sélectionné, puis stocker cette valeur afin de class notre <li> sélectionné comme "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);
…

[Remarque: à partir de maintenant, l'option 5 sera sélectionnée pour démontrer cette fonctionnalité.]

Maintenant, nous pouvons exécuter cette fonction sur chaque <select> sur la page (dans notre cas, un) avec ce qui suit:

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

Nous y sommes presque; ajoutons du style.

Quelques CSS intelligents

Je ne sais pas pour vous, mais je suis un grand fan des listes déroulantes CSS (en particulier la variété Suckerfish ). Je travaille avec eux depuis un certain temps maintenant et j'ai finalement compris qu'un <select> est à peu près comme un menu déroulant, mais avec un peu plus de choses sous le capot. Pourquoi ne pas appliquer la même théorie stylistique à notre faux -<select>? Le style de base ressemble à 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 l'élément de liste "sélectionné", nous devons être un peu plus astucieux:

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 n'utilisons pas la pseudo-classe: hover pour le <ul> pour le rendre ouvert, au lieu de cela nous sommes class- en le faisant "selectOpen". La raison en est double:

  1. CSS est pour la présentation, pas pour le comportement; et
  2. nous voulons que notre faux -<select> se comporte comme un vrai <select>, nous avons besoin que la liste s'ouvre dans un événement onclick et non sur un simple survol.

Pour implémenter cela, nous pouvons prendre ce que nous avons appris de Suckerfish et l'appliquer à notre propre JavaScript en affectant et supprimant dynamiquement ce class dans les événements `` onclickevents for the list items. To do this right, we will need the ability to change theonclick` pour chaque élément de liste à la volée pour basculer entre les deux suivants Actions:

  1. afficher le faux complet -<select> lorsque vous cliquez sur l'option sélectionnée/par défaut lorsque la liste est réduite; et
  2. "sélectionnez" un élément de la liste lorsque vous cliquez dessus et réduisez le faux -<select>.

Nous allons créer une fonction appelée selectMe() pour gérer la réaffectation des événements "sélectionnés" class, la réaffectation des événements onclick pour les éléments de la liste et la réduction du faux -<select>:

Comme le Suckerfish original nous l'a appris, IE ne reconnaîtra pas un état de vol stationnaire sur quoi que ce soit à part un <a>, nous devons donc en tenir compte en augmentant une partie de notre code avec ce que nous avons appris d'eux. Nous pouvons attacher des événements onmouseover et onmouseout au "selectReplacement" class- ed <ul> et ses <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, nous pouvons modifier quelques sélecteurs dans le CSS, pour gérer le survol 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;
}

Nous avons maintenant une liste se comportant comme un <select>; mais nous avons encore besoin d'un moyen de modifier l'élément de liste sélectionné et de mettre à jour la valeur de l'élément de formulaire associé.

JavaScript fu

Nous avons déjà un "sélectionné" class que nous pouvons appliquer à notre élément de liste sélectionné, mais nous avons besoin d'un moyen de l'appliquer à un <li> lorsqu'il est cliqué et de le supprimer de l'un de ses précédents "sélectionnés" " Fratrie. Voici le JS pour accomplir cela:

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

[Remarque: nous pouvons utiliser une simple affectation et vidage className car nous contrôlons complètement les <li>s. Si vous (pour une raison quelconque) devez affecter des classes supplémentaires à vos éléments de liste, je recommande de modifier le code pour ajouter et supprimer la classe "sélectionnée" à votre propriété className.]

Enfin, nous ajoutons une petite fonction pour définir la valeur du <select> original (qui sera soumis avec le formulaire) lorsqu'un <li> est cliqué:

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

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

Voilà. Nous avons créé notre faux fonctionnel -. 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` en le remplaçant, en ajoutant cela au JS ici:

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

Ensuite, ajoutez une nouvelle règle CSS pour masquer le

select.replaced {
  display: none;
}

Avec l'application de quelques images pour finaliser le design (lien non disponible), c'est parti!

Et voici un autre lien à quelqu'un qui dit que cela ne peut pas être fait.

29
some

extrapoler! :)

  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

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

Comme indiqué précédemment, les commandes d'Internet Explorer utilisent WindowsAPI pour dessiner et rendre et vous n'avez rien à résoudre.

Notre solution a été de mettre la couleur de fond de l'élément sélectionné en rouge clair (pour que le texte soit lisible). la couleur d'arrière-plan fonctionnait dans tous les navigateurs, mais dans IE nous avons eu des effets secondaires que l'élément avait la même couleur d'arrière-plan que la sélection.

Donc, pour résumer la solution que nous avons proposée:

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

Notez que la couleur a été définie avec du code hexadécimal, je ne me souviens juste pas laquelle.

Cette solution nous donnait l'effet recherché dans tous les navigateurs, à l'exception de la bordure rouge dans IE.

Bonne chance

5
jpsimard-nyx

j'avais ce même problème avec ie, puis j'ai inséré cette balise meta et cela m'a permis de modifier les bordures dans ie

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

J'ai contourné l'impossibilité de mettre une bordure sur la sélection dans IE7 (IE8 en mode de compatibilité)

En lui donnant une bordure aussi wel qu'un rembourrage, ça ressemble à quelque chose ....

Pas tout, mais ça commence ...

2
user123746

La propriété border-style est une commande abrégée pour définir les styles de bordure de tous les côtés d'un élément html. Chaque côté peut avoir un style différent.

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

2
Nabeela Ansari

IE <8 ne rend pas la liste déroulante elle-même, il utilise simplement le contrôle windows qui ne peut pas être stylé de cette façon. À partir de IE 8, cela a changé et le style est maintenant appliqué. Bien sûr, sa part de marché est encore assez négligeable.

2
User

Utiliser UNIQUEMENT css est impossible. En fait, tous les éléments du formulaire sont impossibles à personnaliser pour ressembler à tous les navigateurs uniquement avec css. Vous pouvez essayer niceforms cependant;)

2
Ionuț Staicu

Ajoutez simplement une déclaration doctype avant la balise html

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

Cela fonctionnera également dans les fichiers JSP. Pour plus d'informations: HTML Doctype Declaration

1
Daniel Costa

Pour moi, cela résout:

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

Pour mettre plus de style il faudra utiliser des divs imbriqués.

1
Rafael Berlanda

Vous auriez besoin d'une boîte de sélection personnalisée avec CSS et JavaScript. Vous devez vous assurer qu'il se dégrade parfaitement en un élément de sélection standard si un utilisateur a désactivé JavaScript.

OMI, ça ne vaut tout simplement pas l'effort. Respectez les styles de police dans la sélection pour le rapprocher de la conception de votre site; laisser les bordures, etc., aux éléments de la boîte.

1
cLFlaVA

Pour faire une bordure le long d'un côté d'une sélection dans IE utilisez les filtres d'IE:

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

Je mets une bordure d'un côté seulement de toutes mes entrées pour le statut requis.

Il y a probablement des effets qui font un meilleur travail pour une frontière complète ...

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

1
user90588

Ça marche!!! Utilisez le code suivant:

<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