Html 如何更改选项宽度

大家好，我有一个简单的下拉框，我已经设计了自己的风格，但我不知道如何改变选项宽度。看起来是这样的：

正如你所知道的，下拉框比实际的盒子小很多，所以我想知道如何编辑这个尺寸，去掉盒子周围的蓝色，改变它的颜色。我用的是boostrap 3

HTML:

---

不应设置包含选择对象的div的样式，而应设置选择对象本身的样式，例如：

.styled选择{
边框：1px实心#e6；
边界半径：2px；
框大小：边框框；
溢出：隐藏；
位置：相对位置；
线高：20px；
颜色：#555；
左侧填充：22px；
字体大小：13px；
字体系列：蒙特塞拉特普通；
}
.styled选择选项{
宽度：74%；
}
.styled select、.styled select{
宽度：74%；
显示：内联块；
}
选择：焦点{
大纲：无；
}
.样式选择{
高度：40px；
填充：5px 0 5px 5px；
背景：透明；
边界：无；
-webkit外观：无；
}
@-moz文档url-前缀（）{
.样式选择{
宽度：110%；
}
}
.fa排序说明{
位置：绝对位置；
顶部：12px；
右：12px；
字体大小：24px；
}
选择：：-ms展开{
显示：无；
}
_：-o-prefocus.styled select、.selector.styled select{
背景：无；
}

这是第一个选择
第二种选择
第三种选择

Answer edited-您使用的是SCSS-需要转换。对不起，还有一件事，我的身高现在不会改变，我不确定why@RonTheOld请确认这个答案通过接受答案帮助了你。@JaneDoe请放松，有些人需要去吃饭sometimes@RonTheOld我很放松，只是想提醒你。。祝您今天过得愉快。

<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>

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