Text-align не работает над сафари <select>

Я попытался выровнять текст в элементе <select> справа или в центре в сафари. Но ничего не получилось. text-align:center; работал во всех браузерах, кроме сафари. direction:rtl; и dir="rtl" ничего не сделали. список всегда выравнивается слева в Safari. -webkit-appearance: none; тоже не помогает. Пожалуйста, мне нужно решение.

Ответы

Ответ 1

Для Safari

text-align: -webkit-center;

Однако наилучшим способом анализа работы HTML/CSS является веб-инспектор в Safari.

enter image description hereПодробнее " >

Ответ 2

Если вы не нашли решения, вы можете использовать этот трюк на angularjs или использовать js для сопоставления выбранного значения с текстом в div, это решение является полным css-совместимым на angular, но для этого требуется сопоставление между select и ДИВ:

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>

Ответ 3

Как я уже сказал в своем комментарии выше, я знаю, что это не на самом деле решение css, но если это важно для вас, это работает как работа, если вы хотите использовать jquery.... он НЕ работает в chrome правильно, но если вы проверите браузер, вы можете просто загрузить его для сафари:

http://jsfiddle.net/nEGV4/4/

Ответ 4

Это сработало для меня.

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