css text-align在safari上不起作用< select>

a1o7rhls 于 2023-08-08 发布在其他

关注(0)|答案(9)|浏览(201)

我尝试在safari中将<select>元素中的文本向右或居中对齐。但都没有用。text-align:center;可以在除safari之外的所有浏览器中运行。direction:rtl;和dir="rtl"没有执行任何操作。在Safari中，列表始终向左对齐。-webkit-appearance: none;也没有帮助。我需要一个解决方案。

css

来源：https://stackoverflow.com/questions/11182559/text-align-is-not-working-on-safari-select

9条答案

按热度按时间

pbossiut1#

是狩猎旅行中的一个错误。
错误40216 - text-align对select标签不起作用
https://bugs.webkit.org/show_bug.cgi?id=40216
2010年

赞(0）回复(0）举报 2023-08-08

kq4fsx7k2#

对于Safari

text-align: -webkit-center;

字符串
然而，分析HTML/CSS工作的最佳方法是Safari中的Web检查器。
x1c 0d1x更多>>

赞(0）回复(0）举报 2023-08-08

rbl8hiat3#

如果你没有找到任何解决方案，你可以在angularjs上使用这个技巧，或者使用js将选定的值与div上的文本Map，这个解决方案在angular上完全兼容css，但需要在select和div之间进行Map：

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上找到这个解决方案。

赞(0）回复(0）举报 2023-08-08

watbbzwu4#

我也遇到过类似的问题。我的问题是根据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中测试）

赞(0）回复(0）举报 2023-08-08

dddzy1tm5#

对我来说，text-align: -weblit-center在移动的Safari上不起作用。我找到了这个解决方案text-indent: 5px hanging;（根据您的情况更改5px）。这家酒店只在野生动物园工作。“

赞(0）回复(0）举报 2023-08-08

pcww981p6#

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>

赞(0）回复(0）举报 2023-08-08

z2acfund7#

正如我在上面的评论中所说，我知道这实际上不是一个css解决方案，但如果对你来说很重要，如果你愿意使用jquery，这可以作为一个工作环境。它在chrome中不能正常工作，但如果您检查浏览器，您可以为safari加载它：
http://jsfiddle.net/nEGV4/4/

赞(0）回复(0）举报 2023-08-08

pexxcrt28#

text-align-last在8月写这篇文章时工作正常。2023.在Mac和iPhone Safari上。

select {
  text-align-last: center;
}

字符串

赞(0）回复(0）举报 2023-08-08

xeufq47z9#

这对我很有效。

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

字符串

赞(0）回复(0）举报 2023-08-08

我来回答

css text-align在safari上不起作用< select>

9条答案

相关问题

热门标签

最新问答