html - last - text-align no está funcionando en safari<seleccionar>
text-align-last safari (5)
He intentado alinear el texto en el elemento <select> a la derecha o al centro en safari. Pero nada funcionó. text-align:center; Trabajó en todos los navegadores excepto safari. direction:rtl; y dir="rtl" no hizo nada. La lista siempre está alineada a la izquierda en Safari. -webkit-appearance: none; Tampoco ayuda. Por favor necesito una solución.
Como dije en mi comentario anterior, sé que esto no es realmente una solución css, pero si es importante para usted, esto funciona como una solución alternativa si está dispuesto a usar jquery ... NO funciona correctamente en Chrome. pero si compruebas el navegador, simplemente puedes cargarlo para safari:
Es un error en el safari.
Error 40216: la alineación de texto no funciona en etiquetas seleccionadas
https://bugs.webkit.org/show_bug.cgi?id=40216
Archivado 2010 😢
Esto funcionó para mí.
select {
text-align:-moz-center;
text-align:-webkit-center;
}
Para safari
text-align: -webkit-center;
Sin embargo, la mejor manera de analizar el funcionamiento de HTML / CSS es el Inspector Web en Safari.
Si no encontró ninguna solución, puede usar este truco en angularjs o js para asignar el valor seleccionado con un texto en el div, esta solución es totalmente compatible con css en angular pero necesita una asignación entre seleccionar y 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>
Espero que esto pueda ser útil para alguien, ya que me tomó un día encontrar esta solución en phonegap.