2

我正在使用此站点中的方法创建自定义下拉列表：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/来说明问题

有解决方法吗？

谢谢，
三通

4

2 回答 2

4

也许你可以尝试添加这样的东西给你.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-29T19:32:48.260 回答
0 
<!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-04T10:05:49.453 回答