web-dev-qa-db-ja.com

text-alignがSafari <select>で機能しない

<select>要素のテキストを、サファリの右側または中央に配置してみました。しかし、何もうまくいきませんでした。 text-align:center;は、サファリを除くすべてのブラウザで機能しました。 direction:rtl;およびdir="rtl"は何もしませんでした。 Safariでは、リストは常に左側に配置されます。 -webkit-appearance: none;も役に立ちません。解決策が必要です。

htmlcssmobile-safaricentertext-alignment
21
syrkull

Safariの場合

text-align: -webkit-center;

ただし、HTML/CSSの動作を分析する最良の方法は、SafariのWeb-Inspectorです。

enter image description here詳細>>

2
Anirudh Ramanathan

解決策が見つからなかった場合は、angularjsでこのトリックを使用するか、jsを使用して、選択した値をdiv上のテキストにマッピングします。この解決策は、angular= selectと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>

電話ギャップでこの解決策を見つけるのに1日かかったので、これが誰かにとって役立つことを願っています。

1
jup31

上記のコメントで述べたように、これは実際にはcssソリューションではないことを知っていますが、jqueryを使用する場合、これは回避策として機能します... chromeは正しく、ブラウザを確認すると、safari用にそれをロードできます。

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

0
Trey

サファリのバグです。

バグ40216-一部のタグではtext-alignが機能しない
https://bugs.webkit.org/show_bug.cgi?id=40216

2010年に提出????

0
Doug