选择内部边框

Question

我正在尝试选择内部边框和自定义图标。这就是我已经做过的事情：

<label class="custom-select">
  <select class="form-control black">
    <option>1to9</option>
  </select>
</label>

https://jsfiddle.net/o1r97q4o/
这就是我想做的事情

Answer 1

这是一个小提琴： http://jsfiddle.net/fm2fj6am/

只需编辑大小，颜色，并在网址图片中添加网址。

＆＃13;

＆＃13;

select {
   margin: 10px;
    border: 1px solid #111;
   color:white;
   width: 200px;
   padding: 8px 35px 8px 5px;
   font-size: 16px;
   border: 1px solid #ccc;
   height: 42px;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
    background: url(http://holding.travelsouthyorkshire.com/images/arrowDown.png) 96% / 15% no-repeat #444;
} 
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width:0/0) { 
    select {
        background:none;
        padding: 5px;
    }
}

＆＃13;

<select>
    <option selected>1 to 9</option>
    <option >10 to 19</option>
    <option>20 to 29</option>
    <option>30 to 39</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是我从this article复制并修改为使用OP标记的解决方案。

你几乎所有的东西都在工作，但是定位，并隐藏了原生的向下箭头。

.custom-select {
  position: relative;
  /*Don't really need this just for demo styling*/

  float: left;
  min-width: 200px;
  margin: 50px 33%;
}

.custom-select:after {
  content: "▼";
  font: 25px "Consolas", monospace;
  color: #333;
  right: 11px;
  /*Adjust for position however you want*/
  
  top: 18px;
  padding-left: 5px;
  border-left: 1px solid #999;
  /*left line */
  
  position: absolute;
  pointer-events: none;
}

.custom-select select {
  /* hide the native down-arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Add some styling */
  
  display: block;
  width: 100%;
  max-width: 320px;
  height: 50px;
  float: right;
  margin: 5px 0px;
  padding: 0px 24px;
  font-size: 16px;
  line-height: 1.75;
  color: #fff;
  background-color: #000;
  background-image: none;
  border: 1px solid #333;
  -ms-word-break: normal;
  word-break: normal;
}

<label class="custom-select">
  <select class="form-control black">
    <option>1to9</option>
  </select>
</label>