如何更改选项宽度

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对象的div，例如：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;