自定义css用于选择和选项

Question

我有一个下拉列表，必须自定义样式。不能使用JQuery。这意味着只有css。默认情况下，一个样式，当我们鼠标悬停在另一个样式上时，当列表显示时也需要一个样式。将附加图像。我需要如下图所示：

我试过，我得到了这个结果......

我使用的风格是：

<style type="text/css">
select{


    margin-left:35px;
    border:1px solid #d7d7d7;
    padding:5px;
    border-radius:2px;
}
select:hover{
    background:#cde4f7;
    border:1px solid #41c9ff;
}

select:focus {
        -webkit-box-shadow: 0 0 3px 1px #7cdaff;
        -moz-box-shadow: 0 0 3px 1px #7cdaff;
        box-shadow: 0 0 3px 1px #7cdaff;
    }
    select:before{
        content: "▼";
    }
option{
    background:#fff;
    border-color:#41c9ff;
    border-radius:2px;
    line-height: 18px;
    outline:none;
    -webkit-box-shadow: 0 0 3px 1px #c00;
    -moz-box-shadow: 0 0 3px 1px #c00;
    box-shadow: 0 0 3px 1px #c00;
}
option:focus{
    -webkit-box-shadow: 0 0 3px 1px #7cdaff;
        -moz-box-shadow: 0 0 3px 1px #7cdaff;
        box-shadow: 0 0 3px 1px #7cdaff;
}
</style>

和html是：

<select name="dr-quarter-estimates" id="one">
    <option>1st Quarter Estimates</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>                              
</select>

任何人都可以帮我这样做......

提前致谢。

BW

Answer 1

列表关闭时，您无法对箭头或黑色边框执行任何操作。

我看到一个弯曲的角落。如果不这样做，请尝试：

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

（如果你需要旧的IE工作，也许CSSPie。）

您可能希望避免SELECT列表并使用http://jqueryui.com/menu/

手动执行此操作

Answer 2

您肯定可以仅使用CSS更改图像和选区的边框，但下拉列表很难设置样式。这是一个靠近您的图片的CSS解决方案（删除框阴影并为聚焦状态添加背景颜色） - http://jsfiddle.net/XxkSC/4579/

它实际上使用jQuery将select包装到span标签 -

  $("select").each(function(){
     var str = $(this).attr('class') ? $(this).attr('class') : '';
     $(this).removeAttr('class');
     $(this).wrap('<span class="custom-select '+str+'"><dd style="position: relative; display: inline-block">');
  });

但它并没有取代选择本身。