Question

我正在使用此网站中的方法创建自定义下拉列表：http://bavotasan.com/2011/style-select-box-using-only-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/来说明问题

有解决方法吗？

谢谢，
三通

Answer 1

也许您可以尝试向您添加.styled-select select

这样的内容

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

这会隐藏重叠文本，我也会选择稍微小一些，或者给它正确填充，这样文字就不会超过向下箭头。

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

Answer 2

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

CSS - 自定义下拉重叠

2 个答案: