Centro de texto horizontal para seleccionar a opção
tenho este simples fiddle com o elemento html padrão <select>, tudo o que estou a tentar fazer é dar o alinhamento do centro para as marcas <option>.
já tentei {[[2]} mas o seu centro apenas a marca visível na selecção!
será grato por qualquer ajuda.
4 answers
Solução 1: (Uma solução simples)
select {
...
padding: 0 0 0 20px;
}
Solução 2: (adicionado 27-10-2017)
Só o número seleccionado será centrado.
* provavelmente ainda não suportado por Safari
select {
...
text-align: center;
text-align-last: center;
}
Podes apenas usar
select {
text-align: center;
}
Ver modificado JSFiddle
Infelizmente, isto só funciona para o Firefox. Para o cromado, deve utilizarpadding-left semelhante à solução de @CTravel
select {
padding-left: 20px;
}
Modificado JSFiddle
Mas isto não funciona nos elementos option do Firefox, por isso esta também não é uma solução cross-browser.
Não utilize
select {
...
padding: 0 0 0 20px;
}
Ou
select {
text-align: center;
}
Eles não estão a trabalhar na selecção. talvez você possa usar o estilo select do JQuery: jQuery UI Select
Vê esta ligação:
Como foi dito em outros lugares, não é possível com CSS simples. (Pelo menos para todos os navegadores)