Html text-align 不适用于 safari <select>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11182559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
text-align is not working on safari <select>
提问by syrkull
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.
我曾尝试将<select>元素中的文本与safari 中的右侧或中心对齐。但没有任何效果。text-align:center;适用于除 safari 以外的所有浏览器。direction:rtl;并dir="rtl"没有做任何事情。该列表在 Safari 中始终与左侧对齐。-webkit-appearance: none;也没有帮助。请我需要一个解决方案。
采纳答案by Anirudh Ramanathan
回答by jup31
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:
如果您没有找到任何解决方案，您可以在 angularjs 上使用此技巧或使用 js 将所选值与 div 上的文本进行映射，此解决方案在 angular 上完全符合 css，但需要在 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>Hope this could be useful for someone as it took me one day to find this solution on phonegap.
希望这对某人有用，因为我花了一天时间在 phonegap 上找到了这个解决方案。
回答by Doug
Is a bug in safari.
是 safari 中的一个错误。
Bug 40216 - text-align doesn't work on select tags
https://bugs.webkit.org/show_bug.cgi?id=40216
错误 40216 - 文本对齐不适用于选择标签
https://bugs.webkit.org/show_bug.cgi?id=40216
Filed 2010
提交 2010
回答by Oleg Karasik
I have faced a very similar issue. My problem was to align text inside <select>element based on text-alignstyle. This was required to correctly handle mediabased styles.
我遇到了一个非常相似的问题。我的问题是<select>根据text-align样式对齐元素内的文本。这是正确处理media基于样式所必需的。
In Chrome I was using text-align-laststyle, however in Safari this style isn't supported (according to MDN).
在 Chrome 中我使用了text-align-last样式，但是在 Safari 中不支持这种样式（根据MDN）。
That is why I came up with the following JavaScript function (using text-indent) which does leftand righttext alignment (not centeras it OP question, but in my defense I think this code can be modified to properly calculate text-indentfor centering):
这就是为什么我想出了以下 JavaScript 函数（使用text-indent），它可以left和right文本对齐（不是center作为 OP 问题，但在我的辩护中，我认为可以修改此代码以正确计算text-indent居中）：
function SELECT_applyTextAlign(element) {
let styles = document.defaultView.getComputedStyle(element, "");
if ( styles.textAlign == 'left'
|| (styles.direction === 'ltr' && styles.textAlign === 'start')) {
// Left alignment doesn't require any kind of calculations.
element.style.textIndent = 0;
return;
}
if ( styles.textAlign == 'right'
|| (styles.direction === 'ltr' && styles.textAlign === 'end')) {
// Right alignment requires a proper width calculations.
let option = element.querySelector('option[value=\'' + element.value + '\']');
if (!option) {
return;
}
// Get original element width
let width = element.getBoundingClientRect().width;
// Create temporary <select> and <option> elements
let sz_select = document.createElement('select');
let sz_option = document.createElement('option');
// This should ensure both <select> have the same styles and <option> have the same text
sz_select.style.cssText = styles.cssText;
sz_select.style.width = 'auto';
sz_select.value = option.value;
sz_option.value = option.value;
sz_option.text = option.text;
// Append <option>
sz_select.appendChild(sz_option);
// Append <select>
element.parentNode.insertBefore(sz_select, element.nextSibling);
// Copy calculated width
let sz_width = sz_select.getBoundingClientRect().width;
element.style.textIndent = (width - sz_width) + 'px'
// Remove unnecessary element
sz_select.remove();
}
}
Then I have attached loadand resizeevent handlers to ensure all <select>elements are processed when page is loaded and when windows size is changed:
然后我重视load和resize事件处理程序，以确保所有<select>在加载页面时，当窗口大小被改变的元素进行处理：
window.addEventListener('load', function() {
let selects = document.getElementsByTagName('select');
Array.prototype.filter.call(selects, function(element) {
SELECT_applyTextAlign(element);
element.addEventListener('change', function () {
SELECT_applyTextAlign(element);
}, false);
});
}, false);
window.addEventListener('resize', function () {
let selects = document.getElementsByTagName('select');
Array.prototype.filter.call(selects, function(element) {
SELECT_applyTextAlign(element);
});
}, false);
Hope this could help someone (tested in chrome, iOS and safari)
希望这可以帮助某人（在 chrome、iOS 和 safari 中测试）
回答by Trey
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:
正如我在上面的评论中所说，我知道这实际上不是一个 css 解决方案，但是如果它对您很重要，那么如果您愿意使用 jquery，这可以作为一种解决方法......它在 chrome 中无法正确工作，但是如果你检查浏览器，你可以为 safari 加载它：
回答by Marcelo Dornelas
This worked for me.
这对我有用。
select {
text-align:-moz-center;
text-align:-webkit-center;
}
