如何更改选项宽度

Question

嗨，伙计们，我有一个简单的下拉框，我已经自我风格，但我不知道如何更改选项宽度。所以它看起来像这样：

你可以告诉下拉的方式比实际的盒子小，所以我想知道如何编辑这个大小并摆脱盒子周围的蓝色并改变它的颜色。我正在使用boostrap 3

HTML：

<div class="styled-select">
   <select>
     <option>Here is the first option</option>
     <option>The second option</option>
     <option>The thrid option</option>
   </select>
  <span class="fa fa-sort-desc"></span>
</div>

CSS：

.styled-select {
      border: 1px solid #e6e6e6;
    border-radius: 2px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
      line-height: 20px;
    color: #555555;
    padding-left: 22px;
    font-size: 13px;
    font-family: Montserrat-Regular;
}

.styled-select option {
 width: 74%;
}
.styled-select, .styled-select select {
 width: 74%;
      display: inline-block;
}
select:focus {
  outline: none;
}
.styled-select select {
  height: 40px;
  padding: 5px 0 5px 5px;
  background: transparent;
  border: none;
  -webkit-appearance: none;
}

@-moz-document url-prefix() {
  .styled-select select {
    width: 110%;
  }
}

.fa-sort-desc {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 24px;
}

select::-ms-expand {
  display: none;
} 

_:-o-prefocus,
.selector {
  .styled-select {
    background: none;
  }
}

Answer 1

您应该设置select对象本身的样式，而不是为包含select对象的div设置样式，例如：

.styled-select {
  border: 1px solid #e6e6e6;
  border-radius: 2px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  line-height: 20px;
  color: #555;
  padding-left: 22px;
  font-size: 13px;
  font-family: Montserrat-Regular;
}
.styled-select option {
  width: 74%;
}
.styled-select, .styled-select select {
  width: 74%;
  display: inline-block;
}
select:focus {
  outline: none;
}
.styled-select select {
  height: 40px;
  padding: 5px 0 5px 5px;
  background: transparent;
  border: none;
  -webkit-appearance: none;
}
@-moz-document url-prefix() {
  .styled-select select {
    width: 110%;
  }
}
.fa-sort-desc {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 24px;
}
select::-ms-expand {
  display: none;
}
_:-o-prefocus .styled-select, .selector .styled-select {
  background: none;
}

<select class="styled-select">
   <option>Here is the first option</option>
   <option>The second option</option>
   <option>The thrid option</option>
 </select>