Ist es möglich, Text in der Auswahlbox zu zentrieren?

Question

ich versucht, dies: 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 es nicht funktioniert sehen kann. Gibt es eine CSS-einzige Möglichkeit, Text in der Auswahlbox zu zentrieren?

Answer 1

Ich fürchte, das ist nicht möglich mit Plain CSS, und wird nicht möglich sein, vollständig Cross-Browser-kompatibel zu machen.

jedoch eine jQuery-Plugin verwenden, können Sie die Drop-down-Stil:

http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Dieses Plugin blendet das select Element und schafft span Elemente usw. on the fly ein benutzerdefinierten angezeigten Listenstil Dropdown. Ich bin ziemlich zuversichtlich, dass Sie die Stile auf den Spannweiten usw. ändern können, um die Elemente in der Mitte auszurichten.

Answer 2

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

Answer 3

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

Verwenden CSS text-indent

Beispiel

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

CSS-Code

select { text-indent: 5px; } 

Answer 4

Nicht ganz Centering aber mit obigen Beispiel befindet sich einen linken Rand machen kann Wählen Sie das Feld aus.

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

Answer 5

Während Sie nicht die Möglichkeit, Text in einem ausgewählten zentrieren, können Sie eine absolut positionierte div über den oberen Teil der Auswahl auf den gleichen Effekt lag:

#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, das sowohl die div und Wählen Sie feste Positionen im Dokument.

Answer 6

Ich bin immer mit dem folgenden Hack davongekommen, um es nur mit CSS zu arbeiten.

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

padding den Text zentrieren und kann für die Textgröße gezwickt werden :)

Dies ist natürlich nicht 100% richtig aus einer Validierungs Sicht Ich denke, aber es macht den Job :)

Answer 7

wenn die Optionen statisch sind, können Sie für das Änderungsereignis auf Ihrer Auswahlbox und Polsterung

für jedes einzelne Element hinzufügen hören konnte

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

Answer 8

Es gibt eine Teillösung für Chrome:

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

Es tut Zentrum der gewählte Option, aber nicht die Optionen in der Dropdown-Liste.

Answer 9

Diese JS-Funktion für Sie

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

Voll Codepen hier arbeiten soll: http://codepen.io/anon/pen/NxyovL

Answer 10

Wenn Sie keine Lösung gefunden haben, können Sie diesen Trick auf AngularJS verwenden oder js mit ausgewähltem Wert zur Karte mit einem Text auf der div ist diese Lösung vollständig CSS-konform auf Winkel sondern muß eine Zuordnung zwischen wählen 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 es mich einen Tag dauerte, diese Lösung auf Phonegap zu finden.

Answer 11

Das ist für rechts ausrichten. Versuchen Sie es:

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

Answer 12

gerade dies mit:

select { 

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

} 

Answer 13

Alternative "fake" Lösung, wenn Sie eine Liste mit Optionen ähnlich in Textlänge (Seite wählen Sie zum Beispiel):

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

Dies funktioniert in Chrome, Firefox und Edge. Der Trick ist hier, den Text von links nach der Mitte zu schieben, dann subtrahieren Sie die Hälfte der Länge in px, em oder was auch immer der Optionstext. Auswahl-Box mit divs oder was auch immer und binden Klickereignisse auf sie für Cross-Browser-Unterstützung

Beste Lösung IMO (2017) ersetzt noch die Auswahl über JS und Ihre eigene gefälschte bauen.

Answer 14

Dies kann für sehr spezifische Anwendungsfälle nützlich sein. Es ist langwierig und hässlich, funktioniert aber über den Browser hinweg: Verwenden Sie einfach fest codierte Leerzeichen, um jedem Eintrag die gleiche Länge zu geben.

<select class="form-control" id="sel1"> 
    <option>-10</option> 
    <option>&nbsp;-9</option> 
    <option>&nbsp;-8</option> 
    <option>&nbsp;-7</option> 
    <option>&nbsp;-6</option> 
    <option>&nbsp;-5</option> 
    <option>&nbsp;-4</option> 
    <option>&nbsp;-3</option> 
    <option>&nbsp;-2</option> 
    <option>&nbsp;-1</option> 
    <option>&nbsp;&nbsp;0</option> 
    <option>&nbsp;&nbsp;1</option> 
    <option>&nbsp;&nbsp;2</option> 
    <option>&nbsp;&nbsp;3</option> 
    <option>&nbsp;&nbsp;4</option> 
    <option>&nbsp;&nbsp;5</option> 
    <option>&nbsp;&nbsp;6</option> 
    <option>&nbsp;&nbsp;7</option> 
    <option>&nbsp;&nbsp;8</option> 
    <option>&nbsp;&nbsp;9</option> 
    <option>&nbsp;10</option> 
</select>