web-dev-qa-db-fra.com

Changer la couleur de la bordure sur le formulaire HTML <select>

Est-il possible de changer la couleur de la bordure sur un <select/> élément dans un formulaire HTML?

Le border-color le style fonctionne dans Firefox mais pas dans IE.

Je n'ai trouvé aucune vraie réponse sur Google.

16

Je penserais à enfermer ce bloc de sélection dans un bloc div et à définir la propriété de bordure comme suit:

<div style="border: 2px solid blue;">
  <select style="width: 100%;">
    <option value="Sal">Sal</option>
    <option value="Awesome">Awesome!</option>
  </select>
</div>


Vous devriez pouvoir jouer avec cela pour accomplir ce dont vous avez besoin.

24
fuentesjr

Comme Diodeus l'a déclaré, IE ne permet rien d'autre que la bordure par défaut pour <select> éléments. Cependant, je connais deux hacks pour obtenir un effet similaire:

  1. Utilisez un DIV qui est placé absolument à la même position que la liste déroulante et définissez ses bordures. Il apparaîtra que la liste déroulante a une bordure.

  2. Utilisez une solution Javascript, par exemple, celle fournie ici .

Cela peut toutefois s'avérer être trop d'effort, vous devez donc évaluer si vous avez vraiment besoin de la frontière.

6
Cerebrus

Non, le <select> le contrôle est un contrôle au niveau système, pas un contrôle au niveau client dans IE. Il y a quelques versions, il ne fonctionnait même pas bien avec z-index, se mettant au dessus de pratiquement tout.

Pour faire quelque chose d'extraordinaire, vous devrez émuler la fonctionnalité en utilisant CSS et vos propres éléments.

select{
    filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1,color=#FF0000);
}

Travaille pour moi.

2
pincopallo

Vous pouvez définir la couleur de la bordure dans IE mais il y a quelques problèmes.

Argh ... J'aurais juré que tu pouvais faire ça ... je viens de tester et de réaliser que je n'étais pas correct. Les notes ci-dessous s'appliquent toujours.

  1. dans IE8 (Beta1 -> RC1), la modification de la couleur de la bordure ou de la couleur/image d'arrière-plan entraîne une dé-thématisation du contrôle dans Windows XP (la flèche et la zone de dépôt ressemblent à Windows 95)

  2. vous ne pouvez toujours pas très bien styliser les options dans le contrôle de sélection car IE ne le prend pas en charge. ( voir bug # 291 )

1
scunliffe

Le remplacement de la couleur de la bordure par la couleur du contour devrait fonctionner.

0
user12091799