我尝试在 safari 中将 <select> 元素中的文本向右或居中对齐。但没有任何效果。 text-align:center; 适用于除 safari 以外的所有浏览器。 direction:rtl; 和 dir="rtl" 没有做任何事情。该列表始终在 Safari 中左对齐。 -webkit-appearance: none; 也无济于事。请问我需要一个解决方案。
【问题讨论】：
标签： html css mobile-safari center text-alignment
【讨论】：
如果您没有找到任何解决方案，您可以在 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>希望这对某人有用，因为我花了一天时间在 phonegap 上找到这个解决方案。
【讨论】：
是 safari 中的一个错误。
错误 40216 - text-align 不适用于选择标签
https://bugs.webkit.org/show_bug.cgi?id=40216
2010 年提交?
【讨论】：
我遇到了一个非常相似的问题。我的问题是根据text-align 样式对齐<select> 元素内的文本。这是正确处理基于media 的样式所必需的。
在 Chrome 中我使用 text-align-last 样式，但在 Safari 中不支持此样式（根据 MDN）。
这就是为什么我想出了以下 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();
}
}
然后我附加了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);
希望这可以帮助某人（在 chrome、iOS 和 safari 中测试）
【讨论】：
正如我在上面的评论中所说，我知道这实际上不是一个 css 解决方案，但如果它对你很重要，如果你愿意使用 jquery，这可以作为一种解决方法....它不起作用chrome 正确，但如果您检查浏览器，您可以将其加载到 safari：
【讨论】：
对我来说，text-align: -weblit-center 不适用于移动 Safari。我找到了这个解决方案text-indent: 5px hanging;（根据您的情况更改 5px）。此属性仅适用于 safari。
【讨论】：
Vanilla js 方法是使用普通输入来显示隐藏选择框的选定文本，然后您可以将输入设置为您希望看起来像选择框的样式。
const inputs = document.getElementsByClassName('js-fake-input');
const selects = document.getElementsByClassName('js-select');
for (let i = 0; i < inputs.length; i++) {
getSelected(i);
selects[i].addEventListener("change", function() {
getSelected(i);
});
}
function getSelected(index){
inputs[index].value = selects[index].options[selects[index].selectedIndex].text;
}.select-holder{
position: relative;
width:200px;
margin-bottom: 10px;
}
.select-holder select{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0 ;
}
.select-holder input{
text-align: center;
width:100%
}<div class="select-holder">
<select class="js-select">
<option>
Option 1
</option>
<option>
Option 2
</option>
</select>
<input type="text" class="js-fake-input">
</div>
<div class="select-holder">
<select class="js-select">
<option>
Option 1
</option>
<option selected>
Option 2
</option>
</select>
<input type="text" class="js-fake-input">
</div>
<div class="select-holder">
<select class="js-select">
<option>
Option 1
</option>
<option>
Option 2
</option>
</select>
<input type="text" class="js-fake-input">
</div>【讨论】：
这对我有用。
select {
text-align:-moz-center;
text-align:-webkit-center;
}
【讨论】：