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

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?

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

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:

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.

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.

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

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

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

Je viens de trouver ce qui semble vraiment bon.

http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

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>

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:

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

Vous devriez essayer d'utiliser un plugin jQuery comme ikSelect .

J'ai essayé de le rendre très personnalisable mais facile à utiliser.

http://github.com/Igor10k/ikSelect

Cela semble vieux mais voici un plugin très intéressant - http://uniformjs.com

ceci sur les utilisations twitter-bootstrapstyles pour activer selectdans le dropdownmenu https://github.com/silviomoreto/bootstrap-select

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>