Diseñando un <select> en Cuestiones de CSS

Estoy usando CSS puro para dar estilo a un < seleccionar> cuadro desplegable. Usando el siguiente código, puedo hacer esto con un pequeño inconveniente: cuando el texto en la opción se vuelve demasiado ancho, no se corta antes que la imagen de fondo de la flecha desplegable.Diseñando un <select> en Cuestiones de CSS

Normal View

Cuando el texto es demasiado largo:

Text too long

Lo que me gustaría lograr es que el texto cortado antes de la caída de la imagen de flecha hacia abajo para que no se superponen . Sin embargo, aun así como el texto completo que se mostrará cuando se expande la lista desplegable:

Expanded

Aquí está el código:

<!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>Styling Selects</title> 
    <style type="text/css"> 
     .selectDiv select { 
      background: transparent; 
      width: 250px; 
      padding: 7px; 
      font-size: 16px; 
      border: none; 
      height: 34px; 
      text-transform: lowercase; 
      color: #666666; 
      z-index: 100; 
      position: absolute; 
      left: 0px; 
      top: 0px; 
     } 

     .selectDiv { 
      border: 2px solid #666666; 
      display: block; 
      width: 218px; 
      height: 34px; 
      overflow: hidden; 
      position:relative; 
      display: inline-block; 
     } 

     .selectButtonDiv { 
      width: 16px; 
      height: 16px; 
      z-index: 99; 
      position: absolute; 
      left: 190px; 
      top: 9px; 
      display: inline-block; 
      background: url("stream_7B0046.png") no-repeat -96px #FFF; 
     }  
    </style> 
</head> 
<body> 
    <div class="selectDiv"> 
     <div class="selectButtonDiv"></div> 
     <select> 
      <option value="Option 1">Option 1</option> 
      <option value="Option With Really Long Name">Option With Really Long Name</option> 
     </select> 
    </div> 
</body> 
</html>

Cualquier ideas sobre cómo podría recortar el texto al mostrar el cuadro desplegable contraído, pero aún así mostrar el texto completo cuando se expande. Todo esto permaneciendo puramente en CSS. ¡Gracias!

Fuente

2012-05-29 John Chapman

¿Has probado el relleno? ¿No? –

Padding-Right agrega relleno a la derecha de la flecha desplegable de selección original, no entre el texto y la flecha. Por lo tanto, no resuelve la necesidad de ocultar la flecha desplegable normal mientras se muestra la otra. –

Mi primera sugerencia sería hacer que el select sea lo suficientemente ancho como para tener en cuenta el recuento de caracteres más grande. Estoy seguro de que pensaste en eso y no está disponible.

Mi segunda recomendación es agregar Javascript, particularmente jQuery DD, para reemplazar el select options con listas de definiciones que se pueden diseñar más fácilmente. https://github.com/HenrikJoreteg/jquery.dd

Fuente

2012-05-29 19:54:50

Terminó usando un plugin jQuery (Elegido), por lo que JS tenía que ser el camino a seguir. –

@JohnChapman gracias por el consejo sobre Elegido, definitivamente voy a empezar a usar eso! –

Ponga el selector en un div interno, y use el relleno -a la derecha en su selectDiv o margin-right existente en ese div interno.

Fuente

2012-05-29 19:21:15

¿Puedes publicar cómo harías eso? Cuando trato de hacerlo, lo hago para que la div con la imagen desplegable ya no esté debajo de la selección (lo que hace que al hacer clic en la imagen ya no aparezca el menú desplegable). –

Agregar float: se deja al div interno, o usa un span en lugar de un div para ese. Es porque está despejando. –

Lo siento. En un dispositivo móvil, codificar algo más útil va a ser una pesadilla en el momento. –

Diseñando un <select> en Cuestiones de CSS

Respuesta

Cuestiones relacionadas