Login/Register
text-align is not working on safari <select>
Asked Answered
Solved htmlcssmobile-safaricentertext-alignment
T

9

31

I have tried aligning the text in the <select> element to the right or the center in safari. But nothing worked. text-align:center; worked in all browsers except safari. direction:rtl; and dir="rtl" did not do anything. the list is always align to the left in Safari. -webkit-appearance: none; does not help either. Please I need a solution.

Tibbitts answered 25/6, 2012 at 1:29 Comment(3)
did you try setting it on the "option" tag instead of select? – Subcritical
yes. It gives the same result – Tibbitts
I've been playing with it and looking around, I can't find a css solution... here is something with jquery that almost works jsfiddle.net/nEGV4 – Subcritical
P
1

For Safari

text-align: -webkit-center;

However, the best way to analyze the working of HTML/CSS is the Web-Inspector in Safari.

enter image description here More >>

Programme answered 25/6, 2012 at 1:31 Comment(11)
Try checking the developer console to find out why the style isn't binding to the input. – Programme
there is no developer console in safari – Tibbitts
It is hard to find the issue, without a code sample from your end. – Programme
please, try it on any Code! <select style="text-align:center;width:300px;"> <option value="1">1</option> </select> – Tibbitts
yes, Please do not give me suggestions without testing it yourself =) – Tibbitts
And in the documentation, there does seem to be a web-inspector to test HTML/CSS That will directly tell you why the CSS isn't being applied. developer.apple.com/library/safari/#documentation/… – Programme
I do not have a Mac I have a Windows and Those tools are not available in the windows software that I have. – Tibbitts
I'm using a Mac and am able to reproduce this on both Safari and Chrome. Does this happen for Windows Chrome? – Matter
@shnisaka There is one, you just have to activate it. – Centillion
Wait... Is this post from 2012? Did not see that until now. Nice necro. – Centillion
@Tibbitts Yes there is a developer console. You may need to enable it in the preferences of Safari. lifewire.com/how-to-enable-safari-develop-menu-2260894 – Ellamaeellan
N
17

text-align-last works as of writing this in Aug. 2023. both on Mac and iPhone Safari.

select {
  text-align-last: center;
}
Najera answered 8/8, 2023 at 10:3 Comment(0)
N
3

Is a bug in safari.

Bug 40216 - text-align doesn't work on select tags
https://bugs.webkit.org/show_bug.cgi?id=40216

Filed 2010 😢

Nee answered 27/2, 2018 at 17:31 Comment(0)
A
2

For me text-align: -weblit-center is not working on mobile Safari. I found this solution text-indent: 5px hanging; (change 5px for your situation). This property is working only on safari.

Anteater answered 31/8, 2021 at 8:56 Comment(2)
this is the only solution that worked for me. It fixes safari but doesn't affect chrome – Basketry
Note that the text-indent 'hanging' keyword was not supported on Safari pre v16, so if older version support is important to you, you will need to use a CSS hack to target Safari and drop 'hanging' - i.e. like this: _::-webkit-full-page-media, _:future, :root select {text-indent: 5px;} – Sweptback
P
1

For Safari

text-align: -webkit-center;

However, the best way to analyze the working of HTML/CSS is the Web-Inspector in Safari.

enter image description here More >>

Programme answered 25/6, 2012 at 1:31 Comment(11)
Try checking the developer console to find out why the style isn't binding to the input. – Programme
there is no developer console in safari – Tibbitts
It is hard to find the issue, without a code sample from your end. – Programme
please, try it on any Code! <select style="text-align:center;width:300px;"> <option value="1">1</option> </select> – Tibbitts
yes, Please do not give me suggestions without testing it yourself =) – Tibbitts
And in the documentation, there does seem to be a web-inspector to test HTML/CSS That will directly tell you why the CSS isn't being applied. developer.apple.com/library/safari/#documentation/… – Programme
I do not have a Mac I have a Windows and Those tools are not available in the windows software that I have. – Tibbitts
I'm using a Mac and am able to reproduce this on both Safari and Chrome. Does this happen for Windows Chrome? – Matter
@shnisaka There is one, you just have to activate it. – Centillion
Wait... Is this post from 2012? Did not see that until now. Nice necro. – Centillion
@Tibbitts Yes there is a developer console. You may need to enable it in the preferences of Safari. lifewire.com/how-to-enable-safari-develop-menu-2260894 – Ellamaeellan
M
1

If you didn't find any solution, you can use this trick on angularjs or using js to map selected value with a text on the div, this solution is full css compliant on angular but need a mapping between select and 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>

Hope this could be useful for someone as it took me one day to find this solution on phonegap.

Memorabilia answered 25/3, 2016 at 13:37 Comment(0)
R
1

I have faced a very similar issue. My problem was to align text inside <select> element based on text-align style. This was required to correctly handle media based styles.

In Chrome I was using text-align-last style, however in Safari this style isn't supported (according to MDN).

That is why I came up with the following JavaScript function (using text-indent) which does left and right text alignment (not center as it OP question, but in my defense I think this code can be modified to properly calculate text-indent for centering):

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();
  }
}

Then I have attached load and resize event handlers to ensure all <select> elements are processed when page is loaded and when windows size is changed:

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);

Hope this could help someone (tested in chrome, iOS and safari)

Rida answered 15/4, 2020 at 10:27 Comment(0)
C
1

Vanilla js method is to use a normal input to display the selected text of a hidden select box, then you can style the input how you want to look like a select box.

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>
Comedown answered 27/9, 2021 at 8:25 Comment(0)
S
0

As I said in my comment above I know this isn't actually a css solution, but if it's important to you this works as a work around if you're willing to use jquery.... it does NOT work in chrome correctly, but if you check for the browser you could just load it for safari:

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

Subcritical answered 25/6, 2012 at 1:40 Comment(0)
C
-3

This worked for me. 

select {
    text-align:-moz-center;
    text-align:-webkit-center;
}
Carycaryatid answered 24/3, 2013 at 9:58 Comment(2)
it does not work on old versions. You are probably using a new version, please see the question date before answering it. – Tibbitts
@SunnyKhatri He clearly says it worked for him, so he did test it. It probably worked in 2013 – Shena

© 2022 - 2024 — McMap. All rights reserved.