Select

wayward · #1 (**permalink**) 09/10/2012, 09:54

Hola.

Este en un simple codigo de ejemplo con el que estoy trabajando. s un SELECT.

Se ve perfecto en Chrome e IE, sin mbargo en Firefox, el texto aparece pegado a la parte de arroba.

Alguna solucion para centrarlo, sin usar Padding?

Un saludo.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body>
<style>
.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   border: 1px solid #ccc;
   height: 75px;
}
 
</style>
 
 
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
 
</body>
</html>

mariogl84 · #2 (**permalink**) 09/10/2012, 13:51

Me temo que no se puede hacer sin padding, wayward.

anacrl · #3 (**permalink**) 11/10/2012, 10:12

Hola!, creo que el padding es la mejor opcion, no estoy del todo segura si en este elemento aplique, pero ya intentaste con un line-height? para definir el alto del select.

mariogl84 · #4 (**permalink**) 12/10/2012, 14:48

En Firefox no le funcionará el line-height para centrarlo.

La práctica común para estos elementos es ocultar el select y maquetar un select falso, y luego mediante javascript montas la funcionalidad. En jQuery hay muchos plugins que te lo hacen.