クライアントが使用したいテンプレート デザインの CSS コードがあります。私が抱えている問題の 1 つは、テキスト オプション (長さが長いオプション) が選択されると、ドロップダウン矢印の上に書き込んでしまうことです。
z-index を使用して、overflow:hidden を適切な場所に配置しようとしました。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 が多すぎることは承知していますが、これもテンプレートからのものであり、何週間も髪を伸ばしてきました。
よろしくお願いします！