Question

您好我正在创建一个MVC Razor网站，我目前有一个样式化的下拉框Here is the jsfiddle。我无法弄清楚如何添加向下箭头。有任何想法吗？我试过this，但它对我不起作用。这是我目前的代码

HTML

<div class="dropdown">
    <select>
        <option>Option One </option>
        <option>Option Two </option>
        <option>Option Three </option>
    </select>
</div>

CSS

.dropdown select{
  background:transparent;
   width: 297px;
   padding: 2px;
   font-family:Arial, Helvetica, sans-serif;
   font-size:1.2em;
   font-weight:600;
   color:#fff;
   line-height: 1;
   border: 0;
   border-radius: 0;
   /*Hides the default arrows for Selects*/
  -webkit-appearance: none;
  -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';

  }


.dropdown{
    width: 297px;
    overflow: hidden;
    background: no-repeat right #363636;
    border-top:#575757 1px solid;
    -webkit-border-radius: 4px 4px 4px 4px;
     -moz-border-radius: 4px 4px 4px 4px;
          border-radius: 4px 4px 4px 4px;
    -webkit-box-shadow: inset 0 2px 4px rgba(107, 105, 105, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
          -moz-box-shadow:    0px 8px 3px -9px #000000;
          -webkit-box-shadow: 0px 8px 3px -9px #000000;
          box-shadow:         0px 8px 3px -9px #000000;  

}

select > option {
  background: #D3D3D3;
  color: black;

Answer 1

您可以通过css和伪元素创建此三角形

.dropdown {
    position: relative;
}

.dropdown:before {
    content: "";
    position: absolute;
    right: 10px;
    top: 8px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #f00;
}

.dropdown:after {
    content: "";
    position: absolute;
    right: 10px;
    top: 3px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #333;
}

以下是演示：http://jsfiddle.net/S3h27/363/

添加向下箭头以选择下拉

1 个答案: