CSS - 自定義下拉重疊

我使用的方法從這個網站創建自定義下拉：http://bavotasan.com/2011/style-select-box-using-only-css/CSS - 自定義下拉重疊

HTML

<div class="styled-select"> 
<select> 
    <option>Here is the first option</option> 
    <option>The second option</option> 
</select> 
</div>

CSS

.styled-select select { 
    background: transparent; 
    width: 268px; 
    padding: 5px; 
    font-size: 16px; 
    line-height: 1; 
    border: 0; 
    border-radius: 0; 
    height: 34px; 
    -webkit-appearance: none; 
} 

.styled-select { 
    width: 240px; 
    height: 34px; 
    overflow: hidden; 
    background: url(new_arrow.png) no-repeat right #ddd; 
    border: 1px solid #ccc; 
}

還有一個工作示例在鏈接中。所以它完美地工作。但是，當我的選項文本很長時，它與下拉菜單重疊。

這裏是一個的jsfiddle鏈接：http://jsfiddle.net/APNB6/來說明問題

是否有解決方法嗎？

感謝，
三通

來源

2013-08-29 teepusink

發佈您的特定問題的JSBin /的jsfiddle會比你立足代碼關閉工作實例更有幫助。 –

唯一可以做的就是爲該選項創建多個'

也許你可以嘗試添加這樣的事情你.styled-select select

.styled-select select{ 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 238px; 
    padding-right:30px; 
}

這將隱藏重疊的文本，我也會讓選擇小一點，或給它正確的填充，所以文本不會超過向下的箭頭。

http://jsfiddle.net/Q687L/2/

來源

2013-08-29 19:32:48

謝謝@Slavenko Miljic。這工作完美，但是，即現在顯示默認的下拉菜單。我可以添加一個屬性來隱藏IE上的默認箭頭嗎？ – teepusink

<!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> 
<style> 
* { 
    outline:none; 
} 
select::-ms-expand { 
appearance: none; 
display:none; 
background:#fff; 
} 
select { 
    -webkit-appearance: none; 
    appearance: none; 
    border:none; 
} 
/*select box apparance*/ 
@-moz-document url-prefix() { 
.styled-select select { 
width:110% !important; 
} 
} 
.styled-select select { 
    width:100%; 
    background:transparent; 
    height:30px; 
    padding:0 30px 0 0; 
} 
.styled-select { 
    border:1px solid #ccc inset; 
    width:200px; 
    overflow:hidden; 
    background: url(down_arrow_select.jpg) no-repeat right #ddd; 
} 
</style> 

<body> 
<div class="styled-select"> 
    <select> 
    <option>Here is the first option Heren inder </option> 
    <option>The second option</option> 
    </select> 
</div> 
</body> 
</html>

來源

2014-09-04 10:05:49

CSS - 自定義下拉重疊

回答

相關問題