0

我有来自客户想要使用的模板设计的 CSS 代码。我遇到的一个问题是，一旦选择了文本选项（那些具有宽长度的选项），就会在下拉箭头上书写。

看图片

我尝试使用 z-index 并在适当的地方放置溢出：隐藏。这是CSS代码：

/* search drop-down values */
select option {}
option.level-0{padding:0 3px;}
option.level-1,option.level-2,option.level-3,
option.level-4,option.level-5,option.level-6,
option.level-7{}
.selectBox-dropdown{ height: 34px; min-width:190px; max-width: 320px;                     position:relative; border:solid 1px #BBB; line-height:1; text-decoration:none; color:#666; outline:none; vertical-align:middle; background:#FFF; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; display:inline-block; cursor:default; margin-top: 1px\9; height: 33px\9;}
.content_right .selectBox-dropdown {width:303px;}
.content_right a.selectBox-dropdown:hover {text-decoration:none;}
.selectBox-dropdown:focus,
.selectBox-dropdown:focus .selectBox-arrow{border-color:#BBB}
.selectBox-dropdown.selectBox-menuShowing{-moz-border-radius-bottomleft:0; -moz-  border-radius-bottomright:0; -webkit-border-bottom-left-radius:0; -webkit-border-bottom-right-radius:0; border-bottom-left-radius:0; border-bottom-right-radius:0}
.selectBox-dropdown .selectBox-label{width:100%; padding:0 .7em; line-height:2.4em; display:inline-block; white-space:nowrap; overflow:hidden; font-size:14px}
.selectBox-dropdown .selectBox-arrow{position:absolute; top:0; right:0; width:23px; height:100%; background:url(images/sb-arrow.png) 50% center no-repeat; border-left:solid 1px #BBB;  }
.selectBox-dropdown-menu{position:absolute; z-index:99999; max-height:200px; border:solid 1px #BBB; background:#FFF; -moz-box-shadow:0 2px 6px rgba(0,0,0,.2); -webkit-box-shadow:0 2px 6px rgba(0,0,0,.2); box-shadow:0 2px 6px rgba(0,0,0,.2); overflow:auto}
.selectBox-inline{width:250px; outline:none; border:solid 1px #BBB; background:#FFF; display:inline-block; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; overflow:hidden;} 
.selectBox-inline:focus{border-color:#666}
.selectBox-options,
.selectBox-options li,
.selectBox-options li a{list-style:none; display:block; cursor:default; padding:0; margin:0}
.selectBox-options li a{color:#666; padding:1px .7em; white-space:nowrap; overflow:hidden; background:6px center no-repeat; text-decoration:none; font:14px/1.5em Arial,Helvetica,sans-serif;}
.selectBox-options li.selectBox-hover a{background-color:#EEE}
.selectBox-options li.selectBox-disabled a{color:#888; background-color:transparent}
.selectBox-options .selectBox-optgroup{color:#666; background:#EEE; font-weight:bold; line-height:1.5; padding:0 .3em; white-space:nowrap;}
.selectBox.selectBox-disabled{color:#888 !important}
.selectBox-dropdown.selectBox-disabled .selectBox-arrow{opacity:.5; filter:alpha(opacity=50); border-color:#666;}
.selectBox-inline.selectBox-disabled{color:#888 !important}
.selectBox-inline.selectBox-disabled .selectBox-options a{background-color:transparent !important}

下拉代码：

<div class="state-dropdown"><?php wp_state_dropdown() ?></div>

<span id="campus_dropdown"><?php if (empty($_GET['cp_state'])){ wp_campus_dropdown();} ?></span>
<?php if (!empty($_GET['cp_state'])){?>
<script type="text/javascript" >loadXMLDoc('<?php echo $_GET['cp_state'];?>','<?php echo $_GET['cp_your_college'];?>')</script>
 <?php }?>

任何建议或帮助将不胜感激。我知道这有点过多的 CSS，但它再次来自模板，我已经把头发拉了好几个星期了！

非常感谢您！

4

1 回答 1

0

首先没有示例 HTML，我们只能猜测 css 是如何使用的。在分析了您提供的 css 之后，我尝试了一下我认为它可能会被使用的方式，这里是 jsFiddle。基于这个假设，有两种选择：

  • 为包含菜单选项的元素设置右填充。这可能会导致下拉列表变宽，但应该更好，因为它允许用户查看选项的整个文本。
  • 将下拉箭头元素 ('.selectBox-arrow') 的背景设置为纯色并匹配包含元素的边框半径。请注意，背景颜色默认为透明。

如果出于某种原因这些选项都不适用于您的情况，请记住，Firebug（或其他浏览器的开发工具）是您的朋友。这些工具可以帮助您快速解决此类问题。

于 2012-10-04T20:14:42.103 回答