Ist es möglich, Text im Auswahlfeld zu zentrieren?

Ich habe es versucht: 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; }

Wie Sie sehen können, funktioniert es nicht. Gibt es eine reine CSS-Möglichkeit, Text im Auswahlfeld zu zentrieren?

Ich befürchte, dass dies mit einfachem CSS nicht möglich ist und nicht vollständig browserübergreifend kompatibel gemacht werden kann.

Mit einem jQuery-Plugin können Sie jedoch das Dropdown-Menü gestalten:

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

Dieses Plugin verbirgt das selectElement und erstellt spanElemente usw. im laufenden Betrieb, um einen benutzerdefinierten Dropdown-Listenstil anzuzeigen. Ich bin mir ziemlich sicher, dass Sie die Stile in den Bereichen usw. ändern können, um die Elemente mittig auszurichten.

Für Chrome gibt es eine Teillösung :

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

Die ausgewählte Option wird zentriert, nicht jedoch die Optionen in der Dropdown-Liste.

Das ist für die richtige Ausrichtung. Versuch es:

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

Die Browserunterstützung für das text-align-lastAttribut finden Sie hier: https://www.w3schools.com/cssref/css3_pr_text-align-last.asp Es sieht so aus, als ob nur Safari es noch nicht unterstützt.

Sie müssen die CSS-Regel in die Auswahlklasse einfügen.

Verwenden Sie CSS-Texteinzug

Beispiel

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

CSS-Code

select { text-indent: 5px; }

Ja, es ist möglich. Sie können text-align-last verwenden

text-align-last: center;

2020, ich benutze:

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

nur mit diesem:

select {

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

}

Diese JS-Funktion sollte für Sie funktionieren

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

Vollständiger Codepen hier: http://codepen.io/anon/pen/NxyovL

Ich bin immer mit dem folgenden Hack durchgekommen, damit es nur mit CSS funktioniert.

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

Das Auffüllen zentriert den Text und kann an die Textgröße angepasst werden :)

Dies ist aus Sicht der Validierung offensichtlich nicht 100% korrekt, aber es macht den Job :)

Alternative "gefälschte" Lösung, wenn Sie eine Liste mit Optionen haben, deren Textlänge ähnlich ist (z. B. Seitenauswahl):

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

Dies funktioniert in Chrome, Firefox und Edge. Der Trick besteht darin, den Text von links in die Mitte zu verschieben und dann die Hälfte der Länge in px, em oder was auch immer des Optionstextes zu subtrahieren.

Beste Lösung IMO (im Jahr 2017) ersetzt weiterhin die Auswahl über JS und erstellt Ihr eigenes gefälschtes Auswahlfeld mit divs oder was auch immer und bindet Klickereignisse für die browserübergreifende Unterstützung darauf.

Nicht ganz zentriert, aber anhand des obigen Beispiels können Sie im Auswahlfeld einen linken Rand erstellen.

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

das hat bei mir funktioniert:

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

Versuche dies :

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

Sie können nicht wirklich anpassen <select>oder <option>viel. Die einzige Möglichkeit (browserübergreifend) besteht darin, manuell ein Dropdown-Menü mit divs und css / js zu erstellen, um etwas Ähnliches zu erstellen.

Wenn Sie keine Lösung gefunden haben, können Sie diesen Trick für AngularJS oder Js verwenden, um den ausgewählten Wert mit einem Text auf dem Div abzubilden. Diese Lösung ist vollständig CSS-konform für Angular, benötigt jedoch eine Zuordnung zwischen Select und 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>

Ich hoffe, dies könnte für jemanden nützlich sein, da ich einen Tag gebraucht habe, um diese Lösung auf Phonegap zu finden.

Während Sie den Optionstext nicht innerhalb einer Auswahl zentrieren können, können Sie ein absolut positioniertes Div über die Auswahl legen, um denselben Effekt zu erzielen:

#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>

Stellen Sie sicher, dass sowohl div als auch select feste Positionen im Dokument haben.

Es ist noch nicht 100%, aber Sie können dieses Snippet verwenden!

text-align-last: center; // Für Chrome Textausrichtung: Mitte; // Für Firefox

Funktioniert momentan nicht auf Safari oder Edge!

Wenn die Optionen statisch sind, können Sie in Ihrem Auswahlfeld auf das Änderungsereignis warten und für jedes einzelne Element eine Auffüllung hinzufügen

$('#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;
    }
});

füge & nbsp so hinzu ...

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

bis du einen Effekt von mittig ausgerichtetem Text bekommst