问题
I have tried aligning the text in the <select> element to the right or the center in safari. But nothing worked. text-align:center; worked in all browsers except safari. direction:rtl; and dir="rtl" did not do anything. the list is always align to the left in Safari. -webkit-appearance: none; does not help either. Please I need a solution.
回答1:
For Safari
text-align: -webkit-center;
However, the best way to analyze the working of HTML/CSS is the Web-Inspector in Safari.
More >>
回答2:
If you didn't find any solution, you can use this trick on angularjs or using js to map selected value with a text on the div, this solution is full css compliant on angular but need a mapping between select and 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>Hope this could be useful for someone as it took me one day to find this solution on phonegap.
回答3:
As I said in my comment above I know this isn't actually a css solution, but if it's important to you this works as a work around if you're willing to use jquery.... it does NOT work in chrome correctly, but if you check for the browser you could just load it for safari:
http://jsfiddle.net/nEGV4/4/
回答4:
Is a bug in safari.
Bug 40216 - text-align doesn't work on select tags
https://bugs.webkit.org/show_bug.cgi?id=40216
Filed 2010 😢
回答5:
This worked for me.
select {
text-align:-moz-center;
text-align:-webkit-center;
}
来源：https://stackoverflow.com/questions/11182559/text-align-is-not-working-on-safari-select