web-dev-qa-db-fra.com

text-align ne fonctionne pas sur le safari <select>

J'ai essayé d'aligner le texte de l'élément <select> à droite ou au centre du safari. Mais rien n'a fonctionné. text-align:center; a fonctionné dans tous les navigateurs sauf Safari. direction:rtl; et dir="rtl" n'ont rien fait. la liste est toujours alignée à gauche dans Safari. -webkit-appearance: none; n'aide pas non plus. S'il vous plaît j'ai besoin d'une solution.

htmlcssmobile-safaricentertext-alignment
18
shnisaka

Pour safari

text-align: -webkit-center;

Cependant, le meilleur moyen d'analyser le fonctionnement de HTML/CSS est Web-Inspector dans Safari.

enter image description herePlus >>

3
Anirudh Ramanathan

Si vous n'avez pas trouvé de solution, vous pouvez utiliser cette astuce sur angularjs ou js pour mapper la valeur sélectionnée avec un texte sur le div. Cette solution est compatible css complète sur angular, mais nécessite un mappage entre select et 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>

J'espère que cela pourra être utile à quelqu'un, car il m'a fallu un jour pour trouver cette solution sur phonegap.

1
jup31

Comme je l'ai dit dans mon commentaire ci-dessus, je sais que ce n'est pas vraiment une solution CSS, mais si c'est important pour vous, cela fonctionne comme un moyen de contourner le problème si vous êtes prêt à utiliser jQuery ... cela ne marche PAS correctement en chrome, mais si vous vérifiez le navigateur, vous pouvez simplement le charger pour le safari:

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

0
Trey

Est-ce un bug dans le safari.

Bug 40216 - text-align ne fonctionne pas sur certaines balises
https://bugs.webkit.org/show_bug.cgi?id=40216

Classé 2010 ????

0
Doug