web-dev-qa-db-fra.com

Est-il possible de styler une boîte de sélection?

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

Quelqu'un peut-il recommander un bon tutoriel ou un 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 zone de sélection

Est-ce que quelqu'un sait quelque chose qui répondra à mes besoins?

jquerycsshtml-select
143
dougoftheabaci

J'ai vu des plugins jQuery qui convertissent <select> à <ol>'le sable <option> à <li> ', afin que vous puissiez le nommer avec CSS. Ne pourrait pas être trop difficile à rouler le vôtre.

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

Utilisez-le comme ceci:

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

Style comme ça:

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;
}
45
Mark A. Nicolosi

Mise à jour: Depuis 2013, les deux que j'ai vus qui valent la peine d'être vérifiés sont les suivants:

  • 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 modifications utiles sur Chosen.

Ouais!

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

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

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

enter image description here

17
papercowboy

En ce qui concerne CSS, Mozilla semble être le plus convivial, en particulier à partir de FF 3.5+. Les navigateurs Webkit font généralement leur propre chose et ignorent tous les styles. IE est très limité, bien que IE8 vous laisse au moins le style couleur/largeur de la bordure.

Ce qui suit est en fait assez joli dans FF 3.5+ (en choisissant votre couleur préférée, 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 de fond de l'option si vous ne souhaitez pas qu'elle s'affiche lorsque le menu d'options n'est pas déroulé. Et, comme je l'ai dit, Webkit agit à sa manière.

14
arxpoetica

Nous avons trouvé un moyen simple et convenable de le faire. C'est multi-navigateur, dégradable, et ne casse pas un post de formulaire. Définissez d'abord l'opacité de la zone 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, div avec les mêmes dimensions que la zone de sélection. La div doit se situer sous la zone 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 code innerHTML du div avec javascript. Easypeasy avec jQuery:

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

C'est ça! Style juste 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 Tweak it. Mais j'espère que vous obtenez le Gist.

Je pense que cette solution bat {-webkit-apparence: none;}. Tout ce que les navigateurs devraient faire au mieux, c'est imposer une interaction avec les éléments de formulaire, mais pas la manière dont ils ont été initialement affichés sur la page, car cela casse la conception du site.

11
Shaun

Voici un petit bouchon si vous voulez surtout

  • devenir fou en personnalisant l'état fermé d'un élément select
  • mais à l’état ouvert , vous privilégiez une meilleure expérience native aux options de sélection (molette de défilement, touches fléchées, tab focus, modifications ajax en options, zindex approprié, etc.)
  • n'aime pas les balises ul, li désordonnées générées

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>

Vérifiez-le sur github.com

10
choonkeat

Vous pouvez style dans une certaine mesure avec CSS seul

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 que jusque-là et cela ne paraît pas toujours très bien. Pour un contrôle total, vous devez remplacer une sélection via jQuery par un widget de votre choix qui émule les fonctionnalités d'une zone 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é.

5
alex

La plupart des navigateurs ne prennent pas en charge la personnalisation de balise de sélection à l'aide de css. Mais je trouve ce javascript qui peut être utilisé pour styler les balises 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 fonctionnait pas

4
SRI

Je viens de trouver cela qui semble vraiment bien.

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

4
Jenny

Si avoir une solution sans jQuery. Un lien où vous pouvez voir un exemple de travail: http://www.letmaier.com/_selectbox/select_general_code.html (stylé 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>
2
Christoph Letmaier

Mis à jour pour 2014: vous n'avez pas besoin de jQuery pour cela . Vous pouvez entièrement styler une boîte 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>

Exécuter styleSelect('select.demo') créerait une boîte de sélection stylée comme suit:

enter image description here

2
mikemaccana

J'ai créé le plugin jQuery, SelectBoxIt , il y a quelques jours. Il tente d'imiter le comportement d'une zone de sélection HTML normale, mais vous permet également de styliser et d'animer la zone de sélection à l'aide de jQueryUI. Jetez un coup d'oeil et laissez-moi savoir ce que vous pensez.

http://www.selectboxit.com

1
Greg Franko

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

1
rzr

Vous devriez essayer d'utiliser un plugin jQuery tel que ikSelect .

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

http://github.com/Igor10k/ikSelect

1
i10k

ceci utilise le Twitter-bootstrap styles à transformer selecten dropdown menu https://github.com/silviomoreto/bootstrap-select

0
anacarolinats