выравнивание текста не работает в сафари ‹select›

Я попытался выровнять текст в элементе <select> вправо или по центру в сафари. Но ничего не сработало. text-align:center; работало во всех браузерах, кроме сафари. direction:rtl; и dir="rtl" ничего не сделали. список всегда выравнивается по левому краю в Safari. -webkit-appearance: none; тоже не помогает. Пожалуйста, мне нужно решение.


html css mobile-safari center text-alignment
person syrkull    schedule 25.06.2012    source источник
comment
Вы пытались установить его в теге option вместо выбора?   -  person Trey    schedule 25.06.2012
comment
да. Это дает тот же результат   -  person syrkull    schedule 25.06.2012
comment
Я играл с этим и искал, я не могу найти решение css... вот что-то с jquery, которое почти работает jsfiddle.net/nEGV4   -  person Trey    schedule 25.06.2012

Ответы (7)


arrow_upward
2
arrow_downward

Для сафари

text-align: -webkit-center;

Однако лучший способ проанализировать работу HTML/CSS — это Web-Inspector в Safari.

введите здесь описание изображенияПодробнее >>

person Anirudh Ramanathan    schedule 25.06.2012
comment
Попробуйте проверить консоль разработчика, чтобы узнать, почему стиль не привязывается к входным данным. - person Anirudh Ramanathan; 25.06.2012
comment
в сафари нет консоли разработчика - person syrkull; 25.06.2012
comment
Трудно найти проблему без примера кода с вашей стороны. - person Anirudh Ramanathan; 25.06.2012
comment
пожалуйста, попробуйте на любом коде! <select style="text-align:center;width:300px;"> <option value="1">1</option> </select> - person syrkull; 25.06.2012
comment
да, пожалуйста, не давайте мне предложений, не проверив это самостоятельно =) - person syrkull; 25.06.2012
comment
И в документации, похоже, есть веб-инспектор для проверки HTML/CSS, который прямо скажет вам, почему CSS не применяется. developer.apple.com/library/safari/#documentation/ - person Anirudh Ramanathan; 25.06.2012
comment
У меня нет Mac, у меня есть Windows, и эти инструменты недоступны в программном обеспечении Windows, которое у меня есть. - person syrkull; 25.06.2012
comment
Я использую Mac и могу воспроизвести это как в Safari, так и в Chrome. Это происходит для Windows Chrome? - person Zhihao; 25.06.2012
comment
@shnisaka Есть один, вам просто нужно его активировать. - person ; 27.02.2018
comment
Подождите... Это пост 2012 года? Такого пока не видел. Хороший некро. - person ; 27.02.2018
comment
@syrkull Да, есть консоль разработчика. Возможно, вам придется включить его в настройках Safari. lifewire.com/how-to-enable-safari-develop- меню-2260894 - person Mig; 03.07.2020

arrow_upward
1
arrow_downward

Если вы не нашли никакого решения, вы можете использовать этот трюк для angularjs или использовать js для сопоставления выбранного значения с текстом в div, это решение полностью совместимо с css для angular, но требует сопоставления между 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>

Надеюсь, это может быть полезно для кого-то, так как мне потребовался один день, чтобы найти это решение на телефонной связи.

person jup31    schedule 25.03.2016

arrow_upward
1
arrow_downward

Это ошибка в сафари.

Ошибка 40216: выравнивание текста не работает для выбранных тегов
https://bugs.webkit.org/show_bug.cgi?id=40216

Подано 2010 ????

person Doug    schedule 27.02.2018

arrow_upward
1
arrow_downward

Я столкнулся с очень похожей проблемой. Моя проблема заключалась в том, чтобы выровнять текст внутри элемента <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 и сафари)

person Oleg Karasik    schedule 15.04.2020

arrow_upward
0
arrow_downward

Как я уже сказал в своем комментарии выше, я знаю, что на самом деле это не решение css, но если это важно для вас, это работает как обходной путь, если вы хотите использовать jquery.... он НЕ работает в хроме правильно, но если вы проверите браузер, вы можете просто загрузить его для сафари:

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

person Trey    schedule 25.06.2012

arrow_upward
0
arrow_downward

Это полный рабочий пример с использованием только CSS, не требующего Js для выравнивания метки выбора по центру для 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>

person Arian Popalyar    schedule 30.04.2021
comment
Это выравнивает по центру метку, а не выбранный параметр - person Donkagunila; 14.05.2021
comment
@Donkagunila да, мое исправление, как сказано в заголовке ответа, состоит в том, чтобы выровнять только метку - person Arian Popalyar; 20.05.2021

arrow_upward
-2
arrow_downward

Это сработало для меня.

select {
    text-align:-moz-center;
    text-align:-webkit-center;
}
person Marcelo Dornelas    schedule 24.03.2013
comment
на старых версиях не работает. Вы, вероятно, используете новую версию, пожалуйста, посмотрите дату вопроса, прежде чем ответить на него. - person syrkull; 25.03.2013
comment
@SunnyKhatri Он ясно говорит, что это сработало для него, поэтому он проверил это. Вероятно, это работало в 2013 году. - person Chuck Le Butt; 18.12.2017