的樣式在CSS問題<select>

我使用純CSS樣式一個<選擇>下拉框。使用下面的代碼，我可以用一個嗝來做到這一點：當在選擇文本變得太寬，它不會下拉箭頭的背景圖像之前切斷。的樣式在CSS問題<select>

Normal View

當文本太長：

Text too long

我想做到的是有文字的下拉箭頭圖像之前切斷，使他們不重疊。不過，我還是很喜歡全文顯示當下拉列表展開：

Expanded

下面是代碼：

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

對我怎麼能剪掉文本的任何想法當顯示摺疊下拉框時，但展開時仍顯示全文。所有這些同時純粹保留在CSS中。謝謝！

來源

2012-05-29 John Chapman

您是否嘗試過填充了吧？ –

填充，右鍵添加填充到原來的選擇下拉箭頭，而不是文字和箭頭之間的權利。所以，它不能解決在顯示另一個時隱藏正常下拉箭頭的需要。 –

我的第一個建議是使select足夠寬，以獲得你的最大的字符數。我相信你想到了這一點，它不可用。

我的第二個建議是添加JavaScript，尤其是jQuery的DD，具有可以更容易地定義樣式表來代替select options。 https://github.com/HenrikJoreteg/jquery.dd

來源

2012-05-29 19:54:50

結束了使用jQuery插件（選上），所以JS們是要走的路。 –

@JohnChapman感謝您選擇的提示，我一定會開始使用它！ –

將選擇在內部DIV，並就內部DIV在現有selectDiv或保證金右使用填充右。

來源

2012-05-29 19:21:15

你可以發表你會怎麼做？當我嘗試這樣做，但它使與下拉圖像股利不再是選擇下方（這使得它所以當你點擊圖片，下拉不再出現）。 –

添加浮動：留給內部div，或使用跨度而不是該div的div。這是因爲它正在清理。 –

對不起。在移動設備上，編寫一些更有用的東西將成爲惡夢。 –

的樣式在CSS問題<select>

回答

相關問題