CSS下拉,<select>在IE中无法使用</select>

时间:2012-09-27 14:18:36

标签: html css forms select drop-down-menu

工作中的客户要求我们将表单转换为导航下拉菜单。本身不是问题,但我们不允许在这里使用任何JS。如果我们不能提出任何其他修复,虽然他们将允许一个小的vanilla JS脚本来处理这个问题。

问题

表单上的输入无法在Internet Explorer中使用,因为单击表单元素时整个菜单会隐藏。

我已经提出JS Fiddle这个问题了,并且非常感谢任何人都可以提供帮助。 HTML / CSS不是我自己的。它已经在项目中了,不幸的是我无法将其拆除,否则会破坏网站的其他部分。

我已经在下面发布了HTML / CSS,对于那些宁愿只是阅读它而不是JS Fiddle的人来说。

HTML:

<div class="head-basket">
   <div class="button">Shopping Basket</div>

   <div class="basket-container">
      <form method="post" action="#" enctype="multipart/form-data">
         <div><input type="hidden" name="basket" value="1" /></div>
         <table cellspacing="0" cellpadding="0" border="0">
            <tbody>
               <tr class="product-row">
                  <td class="item"><a href="/?r=238637" title="remove Dickies Redhawk Super Work Trousers with Free Knee Pads" class="rem">x</a><a href="/dickies-workwear/dickies-knee-pad-trousers/dickies-redhawk-super-work-trousers-with-free-knee-pads-p545.htm">Dickies Redhawk Super Work Trousers with Free Knee Pads</a></td>
                  <td class="quantity">
                     <select name="q238637" id="q238637" class="do-change">
                        <option value="1" selected="selected">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        ...
                     </select>
                  </td>
               </tr>
               <tr class="product-desc">
                  <td class="item" colspan="2"><span>Waist Size: 30", Leg Length: 30", Colour: Black</span></td>
               </tr>
               <tr class="tax-row">
                  <td colspan="3"><span>Item total:</span>£14.99</td>
               </tr>
               <tr class="tax-row">
                  <td colspan="3"><span>UK tax at 20%:</span>£3.00</td>
               </tr>
               <tr class="total-row">
                  <th colspan="3"><span>Total:</span> £17.99</th>
               </tr>
               <tr class="spacer-row">
                  <td colspan="3"> </td>
               </tr>
               <tr class="delivery info-row">
                  <td colspan="3">
                     <p><span class="bold">Free Delivery</span> to England for orders over <span class="bold">£90.00</span> (excluding tax). </p>
                     <p>Spend another <span class="bold">£75.01</span> to qualify!</p>
                  </td>
               </tr>
            </tbody>
         </table>
         <div class="buttons">
            <noscript><div><input type="submit" class="button update" value="Update" /></div></noscript>
            <a href="/your-basket/" class="button tobasket action" rel="nofollow"><tt>Proceed to Secure</tt>Checkout</a>
         </div>
      </form>
   </div>
</div>​ 

CSS:

.head-basket {
    position: absolute;
    z-index: 1000;
    width: 190px;
    right: 0;
    top: 23px;
}

.head-basket .button {
    width: 90%;
    border: none;
    padding: 5%;
    text-align: center;
}

.head-basket .button:hover {
    border-bottom: none;
    box-shadow: none;
}

.head-basket:hover .button {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: #fff;
    border-bottom: none;
}

.head-basket .basket-container {
    background: #fff;
    border: 2px solid #000002;
    display: none;
    padding: 3px;
}
.head-basket:hover .basket-container, .head-basket:active .basket-container, .head-basket .basket-container:active, .head-basket .basket-container:hover {
    background: #fff;
    display: block;
}


button, .button, .button:visited {
        display: inline-block;
        padding: 8px 15px;
        line-height: normal;
        position: relative;
        white-space: nowrap;
        font-size: 12px;
        font-weight: bold;
        color: #aaa;
        background: #000002;
        background: -moz-linear-gradient(#383834,#222222);
        background: -webkit-linear-gradient(#383834,#222222);
        -ms-filter: "progid:dximagetransform.microsoft.gradient(startcolorstr='#383834',endcolorstr='#222222')";
        filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#383834',endcolorstr='#222222');
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        border: 1px solid #111;
        border-bottom-color: #555;
        border-left-color: #555;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        text-decoration: none;
        text-align: left;
        border-width: 2px
}

button:hover, .button:hover {
        text-decoration: none; 
        -webkit-box-shadow: 0 1px 1px #c6c6c6; 
        -moz-box-shadow: 0 1px 1px #c6c6c6; 
        box-shadow: 0 1px 1px #c6c6c6; 
        color: #fff !important;
}

button:focus, .button:focus { 
        outline: 0; 
}

button:active, .button:active { 
        -webkit-box-shadow: inset 0 1px 2px #c6c6c6; 
        -moz-box-shadow: inset 0 1px 2px #c6c6c6; 
        box-shadow: inset 0 1px 2px #c6c6c6;
}​

1 个答案:

答案 0 :(得分:1)

有可能使用:IE9的目标选择器。在您的示例中,您将div.button替换为a.button:

   <a href="#basket-container" class="button">Shopping Basket</a>

将锚添加到div.basket-container:

<div class="basket-container" id="basket-container">
...
</div>

然后使用:目标选择器打开下拉列表:

.head-basket .basket-container:target {
    background: #fff;
    display: block;
}

http://jsfiddle.net/HssXt/10/

http://www.quirksmode.org/css/contents.html#t316

但是,您需要一些额外的关闭按钮来从此目标中删除哈希。在这种情况下,IE8及以下版本仍无法获得任何解决方案。

所以这是不可避免的。您可以使用JS添加一些“活动”类,也可以将select替换为文本输入。

要考虑的另一件事是从下拉列表中删除选择输入。在购物车下拉菜单中更改数量对我来说似乎是一个非常罕见的用例。并且该功能将在结帐页面上(无论如何?),因此您可以简化界面并同时摆脱问题。