Styling ein <select> in CSS-Ausgaben

Ich verwende reines CSS, um ein < wählen> Drop-down-Box. Mit dem unten stehenden Code kann ich dies mit einem Schluckauf machen: Wenn der Text auf der Option zu breit wird, schneidet er nicht vor dem Hintergrundbild des Dropdown-Pfeils ab.Styling ein <select> in CSS-Ausgaben

Normal View

Wenn der Text zu lang ist:

Text too long

Was würde Ich mag es, zu erreichen, den Text vor der Dropdown-Pfeil Bild abgeschnitten haben, so dass sie nicht überlappen . Allerdings würde ich immer noch wie der Volltext anzuzeigen, wenn die Dropdown-Liste erweitert wird:

Expanded

Hier ist der Code:

<!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>

Alle Ideen, wie ich den Text abschneiden könnte Wenn das Dropdown-Feld ausgeblendet angezeigt wird, wird der vollständige Text beim Erweitern immer noch angezeigt. All dies bleibt rein in CSS. Vielen Dank!

Quelle

2012-05-29 John Chapman

Haben Sie versucht Padding-Recht? –

Padding-Right fügt eine Füllung rechts neben dem ursprünglichen Auswahl-Dropdown-Pfeil hinzu, nicht zwischen dem Text und dem Pfeil. Es löst also nicht die Notwendigkeit, den normalen Dropdown-Pfeil zu verbergen, während der andere angezeigt wird. –

Mein erster Vorschlag wäre, die select breit genug zu machen, um Ihre größte Anzahl von Zeichen zu berücksichtigen. Ich bin sicher, du hast darüber nachgedacht und es ist nicht verfügbar.

Meine zweite Empfehlung ist das Hinzufügen von Javascript, insbesondere jQuery DD, um die select options mit Definitionslisten zu ersetzen, die leichter gestylt werden können. https://github.com/HenrikJoreteg/jquery.dd

Quelle

2012-05-29 19:54:50

Beendet mit einem jQuery-Plugin (gewählt), so JS musste der Weg sein. –

@JohnChapman danke für den Tipp auf Chosen, ich werde definitiv anfangen, das zu verwenden! –

Setzen Sie die Auswahl in ein inneres div und verwenden Sie padding-right für Ihr existierendes selectDiv oder margin-right an diesem inneren div.

Quelle

2012-05-29 19:21:15

Können Sie posten, wie Sie das tun würden? Wenn ich das versuche, macht es es so, dass das div mit dem Drop-Down-Bild nicht mehr unterhalb der Auswahl ist (was es so macht, wenn du auf das Bild klickst, erscheint das Drop-down nicht mehr). –

Füge float hinzu: left zum inneren div, oder benutze eine span anstelle eines div für diesen. Es ist, weil es klärt. –

Entschuldigung. Auf einem Handy wird es also ein Albtraum im Mo sein, etwas Nützlicheres zu kodieren. –

Styling ein <select> in CSS-Ausgaben

Antwort

Verwandte Themen