问问题
38103 次
8 回答
2
是 safari 中的一个错误。
错误 40216 - text-align 不适用于选择标签
https://bugs.webkit.org/show_bug.cgi?id=40216
2010 年提交
于 2018-02-27T17:31:24.587 回答
1
于 2012-06-25T01:31:29.213 回答
1
如果您没有找到任何解决方案，您可以在 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 上找到这个解决方案。
于 2016-03-25T13:37:03.543 回答
1
我遇到了一个非常相似的问题。<select>我的问题是根据text-align样式对齐元素内的文本。这是正确处理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 中测试）
于 2020-04-15T10:27:13.027 回答
0
正如我在上面的评论中所说，我知道这实际上不是一个 css 解决方案，但如果它对你很重要，如果你愿意使用 jquery，这可以作为一种解决方法......它不能在 chrome 中正确工作，但如果您检查浏览器，您可以将其加载到 safari：
于 2012-06-25T01:40:22.050 回答
0
对我text-align: -weblit-center来说，不在移动 Safari 上工作。我找到了这个解决方案text-indent: 5px hanging;（根据您的情况更改 5px）。此属性仅适用于 safari。
于 2021-08-31T08:56:53.410 回答
0
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>于 2021-09-27T08:25:00.883 回答
-3
这对我有用。
select {
text-align:-moz-center;
text-align:-webkit-center;
}
于 2013-03-24T09:58:52.933 回答