CSS Sorunlarında <select> Şekillendirme

< seç> açılır kutusunu seçmek için saf CSS kullanıyorum. Aşağıdaki kodu kullanarak, bunu bir hıçkırık ile yapabilirim: seçenekteki metin çok geniş olduğunda, açılır okun arka plan görüntüsünden önce kesilmez.CSS Sorunlarında <select> Şekillendirme

Normal View

metin çok uzun: böylece

Text too long

Ne başarmak istiyoruz olan metin ok görüntüsü açılır önce kesilmiş olması onlar örtüşme yok . Ancak, ben yine de tam metin gibi listesi açılan genişletildiğinde gösterilecek olacaktır:

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

Ben metni keserek nasıl herhangi bir fikir:

İşte Expanded

kodudur Daraltılmış açılır kutuyu görüntülerken, ancak genişletildiğinde tam metni gösterir. Bütün bunlar sadece CSS'de kalırken. Teşekkürler!

kaynak

2012-05-29 John Chapman

Dolgulamayı denediniz mi? –

Dolgu Sağ, metin ve ok arasında değil, orijinal seçim aşağı okunun sağına dolgu ekler. Yani, diğerini görüntülerken normal aşağı okunu gizleme ihtiyacını çözmez. –

İlk önerim, en büyük karakter sayınızı hesaplamak için select genişliğini yeterli hale getirmek olacaktır. Bunun hakkında düşündüğünüze eminim ve mevcut değil.

İkinci tavsiyem, daha kolay biçimlendirilebilen tanım listeleriyle select options'u değiştirmek için Javascript'i, özellikle jQuery DD'yi eklemektir. https://github.com/HenrikJoreteg/jquery.dd

kaynak

2012-05-29 19:54:50

Bir jQuery eklentisi (Seçilmiş) kullanarak sona erdi, bu yüzden JS gitmek için yol olmalıydı. –

@JohnChapman Seçtiğiniz için teşekkürler, kesinlikle bunu kullanmaya başlayacağım! –

Seçimi bir iç div'a yerleştirin ve varolan selectDiv veya sağ kenardaki dolguyu sağdaki dilde kullanın.

kaynak

2012-05-29 19:21:15

Bunu nasıl yapacağınızı gönderir misiniz? Bunu yapmaya çalıştığımda, aşağı açılır görüntü ile div artık seçimin altında kalmıyor (bu, görüntüyü tıklattığınızda bunu yapar, açılır menü artık görünmez). –

Float ekleyin: iç div'a bırakın veya bunun için div yerine bir span kullanın. Çünkü temizleniyor. –

Üzgünüm. Bir mobilde, daha kullanışlı bir şeyi kodlamak, moralde bir kabus olacak. –

CSS Sorunlarında <select> Şekillendirme

cevap

İlgili konular