Est-il possible de centrer le texte dans la case de sélection?

J'ai essayé ceci: http://jsfiddle.net/ilyaD/KGcC3/

HTML:

<select name="state" class="ddList">
    <option value="">(please select a state)</option>
    <option class="lt" value="--">none</option>
    <option class="lt" value="AL">Alabama</option>
    <option class="lt" value="AK">Alaska</option>
    <option class="lt" value="AZ">Arizona</option>
    <option class="lt" value="AR">Arkansas</option>
    <option class="lt" value="CA">California</option>
    <option class="lt" value="CO">Colorado</option>
</select>

CSS:

select { width: 400px; text-align: center; }
select .lt { text-align: center; }

Comme vous pouvez le voir, cela ne fonctionne pas. Existe-t-il un moyen CSS uniquement de centrer le texte dans la zone de sélection?

Je crains que ce ne soit pas possible avec du CSS simple et qu'il ne soit pas possible de rendre complètement compatible avec tous les navigateurs.

Cependant, en utilisant un plugin jQuery, vous pouvez styliser la liste déroulante:

https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html

Ce plugin masque l' selectélément et crée des spanéléments, etc. à la volée pour afficher un style de liste déroulante personnalisé. Je suis assez confiant que vous seriez en mesure de modifier les styles sur les portées, etc. pour aligner les éléments au centre.

Il existe une solution partielle pour Chrome :

select { width: 400px; text-align-last:center; }

Il centre l'option sélectionnée, mais pas les options à l'intérieur de la liste déroulante.

C'est pour aligner à droite. Essayez-le:

select{
    text-align-last:right;
    padding-right: 29px;
    direction: rtl;
}

le support du navigateur pour l' text-align-lastattribut peut être trouvé ici: https://www.w3schools.com/cssref/css3_pr_text-align-last.asp Il semble que seul Safari ne le supporte toujours pas.

Vous devez mettre la règle CSS dans la classe select.

Utiliser le retrait de texte CSS

Exemple

<select class="day"> /* option 1 option 2 option 3 option 4 option 5 here */ </select>

Code CSS

select { text-indent: 5px; }

Oui c'est possible. Vous pouvez utiliser text-align-last

text-align-last: center;

2020, j'utilise:

select {
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}

juste en utilisant ceci:

select {

text-align-last: center;
padding-right: 29px;

}

Cette fonction JS devrait fonctionner pour vous

function getTextWidth(txt) {
  var $elm = $('<span class="tempforSize">'+txt+'</span>').prependTo("body");
  var elmWidth = $elm.width();
  $elm.remove();
  return elmWidth;
}
function centerSelect($elm) {
    var optionWidth = getTextWidth($elm.children(":selected").html())
    var emptySpace =   $elm.width()- optionWidth;
    $elm.css("text-indent", (emptySpace/2) - 10);// -10 for some browers to remove the right toggle control width
}
// on start 
$('.centerSelect').each(function(){
  centerSelect($(this));
});
// on change
$('.centerSelect').on('change', function(){
  centerSelect($(this));
});

Codepen complet ici: http://codepen.io/anon/pen/NxyovL

Je me suis toujours éloigné du hack suivant pour le faire fonctionner avec css uniquement.

padding-left: 45%;
font-size: 50px;

le rembourrage centre le texte et peut être modifié pour la taille du texte :)

Ce n'est évidemment pas correct à 100% du point de vue de la validation, je suppose, mais ça fait l'affaire :)

Solution alternative "fausse" si vous avez une liste avec des options similaires en longueur de texte (sélection de page par exemple):

padding-left: calc(50% - 1em);

Cela fonctionne dans Chrome, Firefox et Edge. L'astuce consiste ici à pousser le texte de gauche à centre, puis à soustraire la moitié de la longueur en px, em ou quoi que ce soit du texte de l'option.

La meilleure solution IMO (en 2017) est toujours en train de remplacer la sélection via JS et de créer votre propre fausse boîte de sélection avec des divs ou autre chose et de lier des événements de clic dessus pour une prise en charge multi-navigateur.

Pas tout à fait Centrage mais en utilisant l'exemple ci-dessus, vous pouvez faire une marge gauche dans la zone de sélection.

<style>.UName { text-indent: 5px; }</style><br>

<select  name="UserName" id="UserName" size="1">
    <option class="UName" selected value="select">Select User</option>
    <option class="UName" value="User1">User 1 Name</option>
    <option class="UName" value="User2">User 2 Name </option>
    <option class="UName" value="User3">User 3 Name</option>
</select>

cela a fonctionné pour moi:

text-align: center;
text-align-last: center;

essaye ça :

select {
    padding-left: 50% !important;
    width: 100%;
}

Vous ne pouvez pas vraiment personnaliser <select>ou <option>beaucoup. La seule façon (cross-browser) serait de créer manuellement une liste déroulante avec divs et css / js pour créer quelque chose de similaire.

Si vous n'avez trouvé aucune solution, vous pouvez utiliser cette astuce sur angularjs ou utiliser js pour mapper la valeur sélectionnée avec un texte sur le div, cette solution est entièrement compatible CSS sur angular mais nécessite un mappage entre select et div:

var myApp = angular.module('myApp', []);

myApp.controller('selectCtrl', ['$scope',
  function($scope) {
    $scope.value = '';


  }
]);

.ghostSelect {
  opacity: 0.1;
  /* Should be 0 to avoid the select visibility but not visibility:hidden*/
  display: block;
  width: 200px;
  position: absolute;
}
.select {
  border: 1px solid black;
  height: 20px;
  width: 200px;
  text-align: center;
  border-radius: 5px;
  display: block;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-guide-concepts-1-production</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
  <div ng-app ng-controller="selectCtrl">
    <div class=select>
      <select ng-model="value" class="ghostSelect">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
      </select>
      <div>{{value}}
      </div>
    </div>
  </div>
</body>

J'espère que cela pourrait être utile pour quelqu'un car il m'a fallu un jour pour trouver cette solution sur phonegap.

Bien que vous ne puissiez pas centrer le texte de l'option dans une sélection, vous pouvez placer un div absolument positionné sur le dessus de la sélection pour le même effet:

#centered
{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 818px;
  height: 37px;
  text-align: center;
  font: bold 24pt calibri;
  background-color: white;
  z-index: 100;
}

#selectToCenter
{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 840px;
  height: 40px;
  font: bold 24pt calibri;
}

$('#selectToCenter').on('change', function () {
    $('#centered').text($(this).find('option:selected').text());
});

<select id="selectToCenter"></select>
<div id="centered"></div>

Assurez-vous que les deux div et select ont des positions fixes dans le document.

Ce n'est pas encore à 100%, mais vous pouvez utiliser cet extrait!

text-align-last: centre; // Pour Chrome text-align: center; // Pour Firefox

Ne fonctionne pas sur Safari ou Edge, pour l'instant!

si les options sont statiques, vous pouvez écouter l'événement de changement sur votre boîte de sélection et ajouter un remplissage pour chaque élément individuel

$('#id').change(function() {
    var select = $('#id');
    var val = $(this).val();

    switch(val) {
        case 'ValOne':
            select.css('padding-left', '30px');
            break;
        case 'ValTwoLonger':
            select.css('padding-left', '20px');
             break;
        default:
            return;
    }
});

ajoutez & nbsp comme ceci ...

    <option value="0"> &nbsp&nbsp&nbsp&nbsp&nbsp--Select Name--</option>

jusqu'à ce que vous obteniez un effet de texte aligné au centre