Question

I need to horizontally center text in a select list, specifically for android and iphones. It seems this cant be done with CSS so im looking for a workaround.

I was thinking about hiding the input behind a div with centered text, and using JavaScript to select the input when you click on the div. I would then need to change the text in the div to equal that of the selected option. If the div was created with JavaScript then the page would will be usable with JavaScript disabled.

I had another idea but this seems trickier to me. I could use JavaScript to get the screen width, apply a calculation, and then apply the right amount of text indentation to the input.

Im interested in best practice but this is a demo project not a live one. Im using jQuery. Thanks

UPDATE – Ive tried the following, where the div#cover covers a select input. It works fine in my iPad. However my old Android wont always focus on the input. Firefox does focus on the input but the options dont fly you, you have to scroll them with arrow keys. So it seems this solution is not as simple as id hoped.

$('div#cover').click(function(){
  $('#select').focus();
});

Answer 1

Code is from here: jQuery – function runs fine when fired on div click, but not on page load

 function textIndentFunc () {

    textString = $('#from-1 :selected').text();

     $('#hidden').text(textString);

     textWidth = $('#hidden').width();

     inputWidth = $('#from-1 select').width();

     indentMy = (inputWidth / 2) - (textWidth / 2);

    $('#from-1').css('text-indent',indentMy);

}

 $('#from-1 select').change(function() {
    textIndentFunc();
 });

 textIndentFunc();