Étiquette : select

[CSS] Habiller l’élément Select de formulaire – les techniques en CSS pur

20/05/2020 / admin

https://www.filamentgroup.com/lab/select-css.html
- pure css, mais pas un vrai select: https://codepen.io/himalayasingh/pen/pxKKgd
- pareil : https://codepen.io/miniven/pen/ZJydge

Solution pour remplacer le chevron par défaut par un picto encodé en base64

Rotate an image online, clockwise or counterclockwise
Convert WebP to Base64 online – Champ « Output Format »: CSS Background Image — background-image:url(). Il peut arriver que les double quotes " (dans url("data:image/webp;base64,...");) posent problème dans certains CMS. Il suffit de les retirer. Ne pas oublier également d’ajouter un caractère ; à la fin de la ligne générée.

Code CSS à mettre en place:

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    //border: none;
    line-height: 1.3;
    padding: .6em 1.4em .5em .8em;
    //font-size: 1.4rem;
    background-color: transparent;
    background-image: url(data:image/webp;base64,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);
    background-position: right 10px top 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

select {

-moz-appearance: none;

-webkit-appearance: none;

appearance: none;

//border: none;

line-height: 1.3;

padding: .6em 1.4em .5em .8em;

//font-size: 1.4rem;

background-color: transparent;

background-image: url(data:image/webp;base64,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);

background-position: right 10px top 50%;

background-repeat: no-repeat;

background-size: contain;

}

[jQuery] Redimensionner automatiquement un element HTML Select en fonction de la largeur de l’Option sélectionnée

26/04/2018 / admin

Source: Auto resizing the SELECT element according to selected OPTION’s width. Voir le jsFiddle ici.

<select id="resizing_select">
 <option>All</option>
 <option>Longer</option>
 <option>A very very long string...</option>
</select>
<select id="width_tmp_select">
 <option id="width_tmp_option"></option>
</select>

<option>Longer</option>

<option>A very very long string...</option>

</select>

</select>

$(document).ready(function() {
 $('#resizing_select').change(function(){
    $("#width_tmp_option").html($('#resizing_select option:selected').text());
    $(this).width($("#width_tmp_select").width());  
 });
});

$(document).ready(function() {

$('#resizing_select').change(function(){

$("#width_tmp_option").html($('#resizing_select option:selected').text());

$(this).width($("#width_tmp_select").width());

});

#resizing_select {
 width: 50px;
} 
 
#width_tmp_select{
 display : none;
}

#resizing_select {

width: 50px;

}

#width_tmp_select{

display : none;

}

Cas particulier: la page se recharge après sélection

Source: Persist variables between page loads.

    ACC.naosPagination.resizeSelectOnTheFly();

    var sortOptionsWidth = sessionStorage.getItem('sortOptionsWidth');
    $('#sortOptions1').width(sortOptionsWidth);
    sessionStorage.removeItem('sortOptionsWidth');


    resizeSelectOnTheFly: function(){
        $('#resizing_select').change(function(){
            $("#width_tmp_option").html($('#resizing_select option:selected').text());
            $(this).width($("#width_tmp_select").width());
            var getWidth = ($('#resizing_select').width()) + 2;

            sessionStorage.setItem('sortOptionsWidth', getWidth+'px');
        });
    }

ACC.naosPagination.resizeSelectOnTheFly();

var sortOptionsWidth = sessionStorage.getItem('sortOptionsWidth');

$('#sortOptions1').width(sortOptionsWidth);

sessionStorage.removeItem('sortOptionsWidth');

resizeSelectOnTheFly: function(){

$('#resizing_select').change(function(){

$("#width_tmp_option").html($('#resizing_select option:selected').text());

$(this).width($("#width_tmp_select").width());

var getWidth = ($('#resizing_select').width()) + 2;

sessionStorage.setItem('sortOptionsWidth', getWidth+'px');

});

}

[jQuery][dataTables] Report des libellés d’en-têtes dans les éléments Select correspondant

07/12/2017 / admin

Un petit code bit pour le projet https://datatables.net/ qui permet le report des libellés d’en-têtes dans les éléments Select correspondant.

// Report des libellés d'en-têtes dans les éléments Select correspondant.
$('th[data-heading]').each(function(){
  var getDataHeadingLabel = $(this).attr('data-heading');
  $(this).find('option[selected]').text(getDataHeadingLabel);
});

// Report des libellés d'en-têtes dans les éléments Select correspondant.

$('th[data-heading]').each(function(){

var getDataHeadingLabel = $(this).attr('data-heading');

$(this).find('option[selected]').text(getDataHeadingLabel);

});

Attention à bien placer et renseigner le data-heading dans la source HTML:

<thead>
  <td>
    <th data-heading="-- Mon en-tête de colonne --"></th>

<thead>

<td>

[RBS Change 3.6.x] Détecter un choix utilisateur via l’élément HTML Select/Option avec jQuery

12/05/2017 / admin

Cas du bloc Switchlanguage dans Change 3.6.x

Objectif: au choix de la langue via l’élément <select />, on redirige vers la page traduite.

Côté template, on boucle sur les langues disponibles. On stocke l’URL de la page de destination via l’attribut value de l’élément option.

<div class="mobile-switchlanguage-block" tal:condition="switchArray">
  <select name="switchlanguage" id="mobileSwitchlanguage" class="unstyled">
    <tal:block tal:condition="not:lang/url" tal:define="lang currentLangInfos">
      <option>${lang/label}</option>
    </tal:block>
    <tal:block tal:repeat="lang otherLangsInfos">
      <option tal:condition="lang/url" tal:attributes="value lang/url;title lang/title">${lang/label}</option>
    </tal:block>
  </select>
</div>

<tal:block tal:condition="not:lang/url" tal:define="lang currentLangInfos">

<option>${lang/label}</option>

</tal:block>

<tal:block tal:repeat="lang otherLangsInfos">

<option tal:condition="lang/url" tal:attributes="value lang/url;title lang/title">${lang/label}</option>

</tal:block>

</select>

</div>

En jQuery, on détecte un choix d’option via l’élément HTML <select />, on récupère la valeur de l’attribut value (l’URL de la page de destination) et on lance la redirection.

jQuery(document).ready(function(){
  jQuery('#mobileSwitchlanguage').on('change', function(){
    var getTargetPageURL = jQuery(this).val();
    window.location.href = getTargetPageURL;
  });
});

jQuery(document).ready(function(){

jQuery('#mobileSwitchlanguage').on('change', function(){

var getTargetPageURL = jQuery(this).val();

window.location.href = getTargetPageURL;

});

[jQuery] Simuler un élément Select à partir d’une liste HTML

01/09/2016 / admin

<div class="TriProduct">
	<span class="Filters-facets__title js-filter-title">Trier par</span>
	<ul class="Filters-facets__list">
		<li>
			<a class="nameFilter" href="">Prix</a>
		</li>
		<li>
			<a class="nameFilter selected>Nouveautés</a>
		</li>
	</ul>
	<i class="icon icon-chevron-down"></i>
</div>

<span class="Filters-facets__title js-filter-title">Trier par</span>

<li>

</li>

<li>

<a class="nameFilter selected>Nouveautés</a>

</li>

</ul>

</div>

$('.TriProduct ul.Filters-facets__list').after('<i class="icon icon-chevron-down" />');
$('.TriProduct ul.Filters-facets__list + i.icon').on('click', function(){
  $('.TriProduct ul.Filters-facets__list a.nameFilter').each(function(){
    $(this).toggleClass('is-shown');
  });
});

$('.TriProduct ul.Filters-facets__list').after('<i class="icon icon-chevron-down" />');

$('.TriProduct ul.Filters-facets__list + i.icon').on('click', function(){

$('.TriProduct ul.Filters-facets__list a.nameFilter').each(function(){

$(this).toggleClass('is-shown');

});

.TriProduct{
    position: relative;
    .Filters-facets__title,
    .Filters-facets__list{
        display: inline-block;
    }
    .Filters-facets__title{
        font-family: $corporate-font-bold;
        &:after{
            content: ":";
            display: inline-block;
            margin: 0 8px;
        }                
    }
    .Filters-facets__list{
        vertical-align: top;
        min-width: 90px;
        border-bottom: 1px solid #000;
        position: absolute;
        .nameFilter{
            position: absolute;
            display: block;
            background-color: #fff;
            padding: 0 2px;
            left: -99999em;
            text-decoration: none;
            color: $site-font-color;
            &.selected,
            &.is-shown{
                position: relative;
                left: 0;
            }
            &.selected{
                // text-decoration: underline;
            }
        }
        + .icon{
            font-size: .6rem;
            padding-left: 6px;
            position: relative;
            left: 100%;
            &:hover{
                cursor: pointer;
            }
            &:before{
                position: relative;
                top: -3px;
            }
        }
    }
}

.TriProduct{

position: relative;

.Filters-facets__title,

.Filters-facets__list{

display: inline-block;

}

.Filters-facets__title{

font-family: $corporate-font-bold;

&:after{

content: ":";

display: inline-block;

margin: 0 8px;

}

.Filters-facets__list{

vertical-align: top;

min-width: 90px;

border-bottom: 1px solid #000;

position: absolute;

.nameFilter{

position: absolute;

display: block;

background-color: #fff;

padding: 0 2px;

left: -99999em;

text-decoration: none;

color: $site-font-color;

&.selected,

&.is-shown{

position: relative;

left: 0;

}

&.selected{

// text-decoration: underline;

}

+ .icon{

font-size: .6rem;

padding-left: 6px;

position: relative;

left: 100%;

&:hover{

cursor: pointer;

}

&:before{

position: relative;

top: -3px;

}

[CSS] Styler tous les éléments de formulaires de façon sexy et uniquement avec CSS

09/12/2015 / admin

Source : Custom Style All Your Form Elements with Pure CSS and No JavaScript

Article en version PDF (pour la postérité) : Custom Style All Your Form Elements with Pure CSS and No javascript (PDF).
Code source HTML/CSS : pure-css-custom-form-elements (zip)

Styler l’élément HTML Select avec CSS

(Works in IE8+, FF, Webkit)

<div class="styled"> 
<select> 
<option>Explorer</option> 
<option>Firefox</option> 
<option>Webkit</option> 
</select> 
</div>

<option>Explorer</option>

<option>Firefox</option>

<option>Webkit</option>

</select>

</div>

div.styled { 
    overflow:hidden; /* this hides the select's drop button */
    padding:0; 
    margin:0; 
    background: white url(formelements-select.png) no-repeat bottom right; 
    /* this is the new drop button, in image form */
    width:12em; border-radius:2px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
    border: solid 1px #ccc; 
}
div.styled select { 
    width:115% /* this percentage effectively extends the drop down button out of view */; 
    background-color:transparent /* this hides the select's background making any styling visible from the div */; 
    background-image:none; 
    -webkit-appearance: none /* this is required for Webkit browsers */; 
    border:none; 
    box-shadow:none; 
    padding:0.3em 0.5em; /* padding should be added to the select, not the div */
}

div.styled {

overflow:hidden; /* this hides the select's drop button */

padding:0;

margin:0;

background: white url(formelements-select.png) no-repeat bottom right;

/* this is the new drop button, in image form */

width:12em; border-radius:2px;

box-shadow: 0 1px 3px rgba(0,0,0,0.2);

border: solid 1px #ccc;

}

div.styled select {

width:115% /* this percentage effectively extends the drop down button out of view */;

background-color:transparent /* this hides the select's background making any styling visible from the div */;

background-image:none;

-webkit-appearance: none /* this is required for Webkit browsers */;

border:none;

box-shadow:none;

padding:0.3em 0.5em; /* padding should be added to the select, not the div */

}

Une variante sans image de fond avec Bootstrap 3 et le composant CSS .caret

.sexy-select{
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: #fff;
  &:after{
    content: "";
    position: absolute;
    right: 8px;
    top: calc(50% - 2px); // 2px = hauteur du caret/2
    pointer-events: none;
    .caret;
  }
  .form-control{
    width: calc(100% + 30px);
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    border: none;
    box-shadow: none;
    padding-right: 36px;
  }
  &.is-light{
    .museo-variant(700);
    border-bottom: 1px solid #ddd;
    .form-control{
      color: @brand-primary;
    }
  }
}
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .sexy-select{
    padding-right: 24px;
    .form-control{
      padding-right: 26px;
    }
  }
}
/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .sexy-select{
    .form-control{
      width: 200%;
    }
  }
}

.sexy-select{

position: relative;

display: block;

overflow: hidden;

padding: 0;

margin: 0;

background: #fff;

&:after{

content: "";

position: absolute;

right: 8px;

top: calc(50% - 2px); // 2px = hauteur du caret/2

pointer-events: none;

.caret;

}

.form-control{

width: calc(100% + 30px);

background-color: transparent;

-webkit-appearance: none;

border: none;

box-shadow: none;

padding-right: 36px;

}

&.is-light{

.museo-variant(700);

border-bottom: 1px solid #ddd;

.form-control{

color: @brand-primary;

}

/* saf3+, chrome1+ */

@media screen and (-webkit-min-device-pixel-ratio:0) {

.sexy-select{

padding-right: 24px;

.form-control{

padding-right: 26px;

}

/* IE 10+ */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

.sexy-select{

.form-control{

width: 200%;

}

[CSS] Activer un champ Select en cliquant à travers un élément sous-jacent avec la propriété CSS pointer-events

10/07/2015 / admin

Source : Click through a DIV to underlying elements

Astuce utile lorsqu’on veut exploiter, sur périphériques mobiles et tactiles (smartphones, tablettes), le widget de l’élément de formulaire <select /> proposé nativement par les navigateurs.
Ci-dessous affichage dans un navigateur desktop vs. smartphone.

Attention : la partie javascript visant à changer le visuel du drapeau en fonction du choix de l’utilisateur ne fonctionne en l’état que si la page est entièrement rechargée.
On ne peut pas simuler le clic sur un élement <select /> en jQuery.

<div id="mobileSwitchlanguage">
  <label for="doSwitchLanguage" class="label-switchlanguage">
    <i id="is-flag"></i>
  </label>
  <select id="doSwitchLanguage" name="mobile-switchlanguage" class="select-switchlanguage">
    <option value="fr">Français</option>
    <option value="es">Español</option>
    <option value="it">Italiano</option>
    <option value="gb">English</option>
  </select>
</div>

</label>

<option value="fr">Français</option>

<option value="es">Español</option>

<option value="it">Italiano</option>

<option value="gb">English</option>

</select>

</div>

#mobileSwitchlanguage {
  position: relative;
}
.label-switchlanguage {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: left;
}
.select-switchlanguage {
  width: 18px;
  height: 10px;
  margin-top: 2px;
}
#is-flag {
  display: inline-block;
  width: 22px;
  height: 14px;
}
#is-flag.fr {
  background-image: url(img/fr.png);
}
#is-flag.es {
  background-image: url(img/es.png);
}
#is-flag.it {
  background-image: url(img/it.png);
}
#is-flag.gb {
  background-image: url(img/gb.png);
}

#mobileSwitchlanguage {

position: relative;

}

.label-switchlanguage {

pointer-events: none;

position: absolute;

top: 0;

left: left;

}

.select-switchlanguage {

width: 18px;

height: 10px;

margin-top: 2px;

}

#is-flag {

display: inline-block;

width: 22px;

height: 14px;

}

#is-flag.fr {

}

#is-flag.es {

}

#is-flag.it {

}

#is-flag.gb {

}

jQuery(document).ready(function(){
  // On récupère la valeur de l'attribut 'value' de l'élément <option /> pour l'affecter sous forme de classe à l'élément <label /> (pour afficher les différents drapeaux)
  var getDefaultOptionValue = jQuery('select#doSwitchLanguage[name="mobile-switchlanguage"]').val();
  jQuery('label[for="doSwitchLanguage"] #is-flag').addClass(getDefaultOptionValue);
  
  // Passée cette ligne, le code ci-dessous ne donnera pas de résultat.
  jQuery('select#doSwitchLanguage[name="mobile-switchlanguage"]').on('click', function(){
    var getOptionNewValue = jQuery(this).val();
    jQuery('label[for="doSwitchLanguage"] #is-flag').removeClass().addClass(getOptionNewValue);
  });
});

jQuery(document).ready(function(){

// On récupère la valeur de l'attribut 'value' de l'élément <option /> pour l'affecter sous forme de classe à l'élément <label /> (pour afficher les différents drapeaux)

var getDefaultOptionValue = jQuery('select#doSwitchLanguage[name="mobile-switchlanguage"]').val();

jQuery('label[for="doSwitchLanguage"] #is-flag').addClass(getDefaultOptionValue);

// Passée cette ligne, le code ci-dessous ne donnera pas de résultat.

jQuery('select#doSwitchLanguage[name="mobile-switchlanguage"]').on('click', function(){

var getOptionNewValue = jQuery(this).val();

jQuery('label[for="doSwitchLanguage"] #is-flag').removeClass().addClass(getOptionNewValue);

});

Articles récents

Catégories

Archives

Méta

Étiquette : select

[CSS] Habiller l’élément Select de formulaire – les techniques en CSS pur

Solution pour remplacer le chevron par défaut par un picto encodé en base64

[jQuery] Redimensionner automatiquement un element HTML Select en fonction de la largeur de l’Option sélectionnée

Cas particulier: la page se recharge après sélection

[jQuery][dataTables] Report des libellés d’en-têtes dans les éléments Select correspondant

[RBS Change 3.6.x] Détecter un choix utilisateur via l’élément HTML Select/Option avec jQuery

Cas du bloc Switchlanguage dans Change 3.6.x

[CSS] Styler tous les éléments de formulaires de façon sexy et uniquement avec CSS

Styler l’élément HTML Select avec CSS

Une variante sans image de fond avec Bootstrap 3 et le composant CSS .caret

[CSS] Activer un champ Select en cliquant à travers un élément sous-jacent avec la propriété CSS pointer-events