Is it possible to center text in select box?

后端 未结 19 2400
一整个雨季
一整个雨季 2020-11-22 11:21

I tried this: http://jsfiddle.net/ilyaD/KGcC3/

HTML:


                        
    
提交评论

  • 2020-11-22 12:05

    I'm afraid this isn't possible with plain CSS, and won't be possible to make completely cross-browser compatible.

    However, using a jQuery plugin, you could style the dropdown:

    https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html

    This plugin hides the select element, and creates span elements etc on the fly to display a custom drop down list style. I'm quite confident you'd be able to change the styles on the spans etc to center align the items.

    0 讨论(0)
  • 2020-11-22 12:05

    2020, Im using:

    select {
        text-align: center;
        text-align-last: center;
        -moz-text-align-last: center;
    }
    
    0 讨论(0)
  • 2020-11-22 12:07

    You can't really customise <select> or <option> much. The only way (cross-browser) would be to manually create a drop down with divs and css/js to create something similar.

    0 讨论(0)
  • 2020-11-22 12:08

    I have always gotten away with the following hack to get it to work with css only.

    padding-left: 45%;
    font-size: 50px;
    

    padding will center the text and can be tweaked for the text size :)

    This is obviously not 100% correct from a validation point of view I guess but it does the job :)

    0 讨论(0)
  • 2020-11-22 12:08

    It's not 100% yet, but you can use this snippet!

    text-align-last: center; // For Chrome text-align: center; // For Firefox

    Doesn't work on Safari or Edge, for now!

    0 讨论(0)
  • 提交回复
    热议问题