Est-il possible de styliser une boîte de sélection? [fermé]


145

J'ai une boîte de sélection HTML que je dois styliser. Je préférerais utiliser uniquement CSS, mais si je le dois, j'utiliserai jQuery pour combler les lacunes.

Quelqu'un peut-il recommander un bon tutoriel ou plugin?

Je sais, Google, mais je cherche depuis deux heures et je ne trouve rien qui réponde à mes besoins.

Il doit être:

  • Compatible avec jQuery 1.3.2
  • Accessible
  • Discret
  • Entièrement personnalisable en termes de style de chaque aspect d'une boîte de sélection

Quelqu'un sait-il quelque chose qui répondra à mes besoins?


6
vous voulez dire que vous voulez une liste déroulante personnalisable (intégrée à jquery), non? parce que les boîtes de sélection ne sont même pas des objets de navigateur (ce sont des objets de plate-forme), très simples, très brutes, et vous ne pouvez pas en styliser beaucoup (vous ne pouvez pas styliser les bordures par exemple)
Ayyash

+1 pour une explication et un formatage sympas!
Manish

6
Le choix vaut la peine d'être mentionné mais n'est pas très personnalisable et présente de nombreux problèmes en suspens. Bien à regarder et à utiliser, cependant.
un nerd payé

1
@Ayyash Ce que vous dites est vrai pour MSHTML (Internet Explorer et ses amis) et WebCore (Safari) sur certains systèmes (certainement Mac OS). Ce n'est pas vrai pour Gecko (Firefox et ses amis). Donc, le problème réel est que vous ne pouvez pas styliser les selectéléments entre navigateurs. Mais si les gens sont prêts à vivre avec les différences, vous pouvez les styliser, y compris les frontières.
PointedEars

1
@PointedEras oui, en 2012, ils le peuvent, mais je suppose que c'était il y a 3 ans quand j'ai dit ce que j'ai dit, je suis presque sûr que j'ai donné une chance à l'époque et que cela n'a pas fonctionné
Ayyash

Réponses:


45

J'ai vu des plugins jQuery qui convertissent <select>les s en <ol>et <option>les en <li>, afin que vous puissiez le styliser avec CSS. Ça ne pourrait pas être trop difficile de rouler le vôtre.

En voici un: https://gist.github.com/1139558 (Utilisé ici , mais il semble que le site est en panne.)

Utilisez-le comme ceci:

$('#myselectbox').selectbox();

Style-le comme ceci:

div.selectbox-wrapper ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
}
div.selectbox-wrapper ul li.selected { 
  background-color: #EAF2FB;
}
div.selectbox-wrapper ul li.current { 
  background-color: #CDD8E4;
}
div.selectbox-wrapper ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}

J'ai essayé cette version au départ mais le DIV n'est pas positionné par rapport à l'endroit où se trouve la boîte de sélection. Au lieu de cela, il est positionné dur à gauche.

Je ne l'ai pas utilisé moi-même. La démo ( brainfault.com/demo/selectbox/0.5 ) semble bien. Recherchez d'autres implémentations. Je sais que j'ai vu plusieurs autres plugins qui font cela.
Mark A. Nicolosi

1
J'ai essayé cela et cela a fonctionné pendant un certain temps jusqu'à ce que je doive en mettre plus d'un sur la page. Maintenant, il est difficile de styliser parce que, pour une raison stupide, l'auteur a pensé qu'il était acceptable d'utiliser le même ID pour tous les éléments plutôt que des ID ou des classes uniques. Maintenant, je pense à écrire mon propre ...
Jonathan

19
404 - des idées où il y avait des miroirs?
Moak

2
Gardez simplement à l'esprit que la plupart des plugins de menu de sélection sont inaccessibles aux lecteurs d'écran. Je n'en ai pas encore trouvé un qui fonctionne.
Marcy Sutton

18

Mise à jour: Depuis 2013, les deux que j'ai vus qui méritent d'être vérifiés sont:

  • Choisi - plein de trucs sympas, 7k + observateurs sur github. (mentionné par `` un nerd payé '' dans les commentaires)
  • Select2 - inspiré par Chosen, une partie de Angular-UI avec quelques ajustements utiles sur Chosen.

Ouais!


Depuis 2012, l'une des solutions les plus légères et flexibles que j'ai trouvées est ddSlick . Informations pertinentes (modifiées) du site:

  • Ajoute des images et du texte à select options
  • Peut utiliser JSON pour remplir les options
  • Prend en charge les fonctions de rappel lors de la sélection

Et voici un aperçu des différents modes:

entrez la description de l'image ici


14

Quant au CSS, Mozilla semble être le plus convivial, en particulier à partir de FF 3.5+. Les navigateurs Webkit font généralement leur propre travail et ignorent tout style. IE est très limité, même si IE8 vous permet au moins de définir la couleur / largeur de la bordure.

Ce qui suit est en fait assez joli dans FF 3.5+ (en choisissant votre préférence de couleur, bien sûr):

select {
    -moz-border-radius: 4px;
    -moz-box-shadow: 1px 1px 5px #cfcfcf inset;
    border: 1px solid #cfcfcf;
    vertical-align: middle;
    background-color: transparent;
}
option {
    background-color: #fef5e6;
    border-bottom: 1px solid #ebdac0;
    border-right: 1px solid #d6bb86;
    border-left: 1px solid #d6bb86;
}
option:hover {
    cursor: pointer;
}

Mais en ce qui concerne IE, vous devez désactiver la couleur d'arrière-plan de l'option si vous ne voulez pas qu'elle s'affiche lorsque le menu d'options n'est pas déroulé. Et, comme je l'ai dit, Webkit fait sa propre chose.


11

Nous avons trouvé un moyen simple et décent de le faire. C'est cross-browser, dégradable et ne casse pas un post de formulaire. Définissez d'abord l'opacité de la boîte de sélection sur 0.

.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

c'est pour que vous puissiez toujours cliquer dessus

Ensuite, créez un div avec les mêmes dimensions que la boîte de sélection. Le div doit se trouver sous la boîte de sélection comme arrière-plan. Utilisez {position: absolute} et z-index pour y parvenir.

.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

Mettez à jour le fichier innerHTML de la div avec javascript. Easypeasy avec jQuery:

$('.select').click(function(event)) { 
    $('.div').html($('.select option:selected').val());
}

C'est tout! Stylisez simplement votre div au lieu de la zone de sélection. Je n'ai pas testé le code ci-dessus, vous aurez donc probablement besoin de le modifier. Mais j'espère que vous comprenez l'essentiel.

Je pense que cette solution bat {-webkit-looks: none;}. Ce que les navigateurs devraient tout au plus faire est de dicter l'interaction avec les éléments du formulaire, mais certainement pas la façon dont ils s'affichent initialement sur la page car cela rompt la conception du site.


10

Voici une petite fiche si vous voulez surtout

  • devenir fou en personnalisant l' état fermé d'un selectélément
  • mais à l'état ouvert , vous préférez une meilleure expérience native aux options de sélection (molette de défilement, touches fléchées, focus tab, modifications ajax options, zindex approprié, etc.)
  • ne pas aimer les malpropres ul, ligénérés marges bénéficiaires

Alors jquery.yaselect.js pourrait être un meilleur ajustement . Simplement:

$('select').yaselect();

Et le balisage final est:

<div class="yaselect-wrap">
  <div class="yaselect-current"><!-- current selection --></div>
</div>
<select class="yaselect-select" size="5">
  <!-- your option tags -->
</select>

Découvrez-le sur github.com


c'est génial et fonctionne aussi sur les appareils mobiles :)
Flying

fonctionne sur IOS. désolé, je n'ai pas accès à Android, etc.?
choonkeat

1
ce n'était pas une question, c'était un éloge. il fait beau travail sur mon Android.
mouton volant

5

Vous pouvez styliser dans une certaine mesure avec CSS par lui-même

select {
    background: red;
    border: 2px solid pink;
}

Mais cela dépend entièrement du navigateur. Certains navigateurs sont têtus.

Cependant, cela ne vous mènera pas loin et cela n'a pas toujours l'air très bien. Pour un contrôle complet, vous devrez remplacer une sélection via jQuery par un widget de votre choix qui émule la fonctionnalité d'une boîte de sélection. Assurez-vous que lorsque JS est désactivé, une boîte de sélection normale est à sa place. Cela permet à plus d'utilisateurs d'utiliser votre formulaire et facilite l'accessibilité.


4

La plupart des navigateurs ne prennent pas en charge la personnalisation de la balise de sélection à l'aide de css. Mais je trouve ce javascript qui peut être utilisé pour styliser la balise select. Mais comme d'habitude, aucun support pour les navigateurs IE.

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ J'ai remarqué une erreur à ce sujet que l'attribut Onchange ne fonctionne pas



2

Si vous avez une solution sans jQuery. Un lien où vous pouvez voir un exemple de travail: http://www.letmaier.com/_selectbox/select_general_code.html (stylisé avec plus de CSS)

La section style de ma solution:

<style>
#container { margin: 10px; padding: 5px; background: #E7E7E7; width: 300px; background: #ededed); }
#ul1 { display: none; list-style-type: none; list-style-position: outside; margin: 0px; padding: 0px; }
#container a {  color: #333333; text-decoration: none; }
#container ul li {  padding: 3px;   padding-left: 0px;  border-bottom: 1px solid #aaa;  font-size: 0.8em; cursor: pointer; }
#container ul li:hover { background: #f5f4f4; }
</style>

Maintenant, le code HTML à l'intérieur de la balise body:

<form>
<div id="container" onMouseOver="document.getElementById('ul1').style.display = 'block';" onMouseOut="document.getElementById('ul1').style.display = 'none';">
Select one entry: <input name="entrytext" type="text" disabled readonly>
<ul id="ul1">
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 1'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 1</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 2'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 2</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 3'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 3</a></li>
</ul>
</div>
</form>

Veuillez fournir un exemple au lieu de simplement créer un lien vers un.
Tous les travailleurs sont essentiels

J'ai changé ma réponse comme vous l'avez demandé.
Christoph Letmaier

1
Ça a l'air beaucoup mieux maintenant. BTW, il n'y a rien de mal à créer un lien vers un exemple de travail ou une source montrant un exemple (cela peut être très utile). Mais inévitablement les liens deviennent invalides avec le temps, il est donc souhaitable de toujours fournir les informations nécessaires dans la réponse elle-même (que vous avez fournie) même lorsque des liens utiles sont fournis.
Tous les travailleurs sont essentiels

Ok, compris ... :-) Je ferai de mon mieux pour garder le lien vivant ...
Christoph Letmaier

2

Mise à jour pour 2014: vous n'avez pas besoin de jQuery pour cela . Vous pouvez entièrement styliser une zone de sélection sans jQuery en utilisant StyleSelect . Par exemple, étant donné la boîte de sélection suivante:

<select class="demo">
  <option value="value1">Label 1</option>
  <option value="value2" selected>Label 2</option>
  <option value="value3">Label 3</option>
</select>

L'exécution styleSelect('select.demo')créerait une boîte de sélection stylisée comme suit:

entrez la description de l'image ici


Note latérale, pas de support pour IE9 et inférieurs
Ben Sewards

1

J'ai créé le plugin jQuery, SelectBoxIt , il y a quelques jours. Il essaie d'imiter le comportement d'une boîte de sélection HTML standard, mais vous permet également de styliser et d'animer la boîte de sélection à l'aide de jQueryUI. Jetez un œil et dites-moi ce que vous en pensez.

http://www.selectboxit.com





-1

La solution simple consiste à déformer votre boîte de sélection à l'intérieur d'un div et à styliser le div correspondant à votre conception. Réglez l'opacité: 0 pour sélectionner la boîte, cela rendra la boîte de sélection invisible. Insérez une balise span avec jQuery et modifiez sa valeur dynamiquement si l'utilisateur change la valeur de la liste déroulante. Démonstration totale présentée dans ce didacticiel avec explication du code. J'espère que cela résoudra votre problème.

Le code JQuery ressemble à ceci.

 <script>
   $(document).ready(function(){
     $('.dropdown_menu').each(function(){
       var baseData = $(this).find("select option:selected").html();
       $(this).prepend("<span>" + baseData + "</span>");
     });

     $(".dropdown_menu select").change(function(e){
       var nodeOne = $(this).val();
       var currentNode = $(this).find("option[value='"+ nodeOne +"']").text();
       $(this).parents(".dropdown_menu").find("span").text(currentNode);
     });
   });
</script>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.