Question

我尝试将<select>元素中的文本与safari中的右侧或中心对齐。但没有任何效果。 text-align:center;在除safari之外的所有浏览器中都有效。 direction:rtl;和dir="rtl"没有做任何事情。该列表始终与Safari中的左侧对齐。 -webkit-appearance: none;也无济于事。我需要一个解决方案。

Answer 1

适用于Safari

text-align: -webkit-center;

然而，分析HTML / CSS工作的最佳方法是Safari中的Web-Inspector。

enter image description here More >>

Answer 2

如果你没有找到任何解决方案，你可以在angularjs上使用这个技巧或使用js将所选值与div上的文本映射，这个解决方案是完全符合角度的css但是需要在select和DIV：

＆＃13;

var myApp = angular.module('myApp', []);

myApp.controller('selectCtrl', ['$scope',
  function($scope) {
    $scope.value = ''; 
}]);

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

希望这对某些人有用，因为我花了一天时间在phonegap上找到这个解决方案。

Answer 3

正如我在上面的评论中所说，我知道这实际上并不是一个css解决方案，但是如果它对你很重要，那么如果你愿意使用jquery那就可以解决这个问题....它不起作用Chrome正确，但是如果你检查浏览器，你可以加载它来进行safari：

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

Answer 4

是safari中的错误。

错误40216 - text-align对选择标记不起作用 https://bugs.webkit.org/show_bug.cgi?id=40216

提交2010年

Answer 5

我遇到了一个非常相似的问题。我的问题是要根据<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中测试）

Answer 6

这是一个完整的工作示例，只需要 CSS 就可以在 Safari 的中心对齐选择标签。它适用于所有浏览器。

.select-wrap {
  border: 1px solid #777;
  border-radius: 4px;
  width:200px;
  background-color:#fff;
  position:relative;
}
.select-wrap label{
  font-size: 20px;
text-transform: uppercase;
color: #777;
width: 100%;
text-align: center;
display: block;
position: absolute;
tex-align: center;
margin: 10px auto;
pointer-events: none;
}

select{
  background-color: #fff;
  border:0px;
  height:50px;
  font-size: 16px;
}

<div class="select-wrap">
  <label>Color</label>
  <select name="color" style="width: 100%;">
    <option value=""></option>
    <option value="yellow">Yellow</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
  </select>
</div>

Answer 7

这对我有用。

select {
    text-align:-moz-center;
    text-align:-webkit-center;
}

text-align不适用于safari <select> </select>

7 个答案: