如何设置选择下拉列表中的“选项”值？

Question

我正在尝试在option框中标注select个标签，但是当我点击它时，选项标签比选择框宽，但它们应该相等。有可能通过CSS实现吗？

以下是目前的进展：http://codepen.io/anon/pen/aBrzqz

.search {
  border: 1px solid #ccc;
  width: 250px;
  overflow: hidden;
  background: #fafafa url("http://www.honigwine.com/assets/images/global/tabs/arrow-down.png") no-repeat 90% 50%;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  float: left;
}
.search select {
  padding: 10px 18px;
  height: 55px;
  width: 110%;
  border: none;
  box-shadow: none;
  background: transparent;
  cursor: pointer;
}
.search select .option {
  padding: 10px 18px;
  width: 250px;
}

<div class="search">
  <select>
    <option value="" class="option">Choose something</option>
    <option value="">One</option>
    <option value="">Two</option>
    <option value="">Three</option>
  </select>
</div>

Answer 1

css中的最后一个样式隐藏了默认下拉列表aroow并仅显示自定义下拉列表。

＆＃13;

＆＃13;

.search {
  border: 1px solid #ccc;
  width: 250px;
  overflow: hidden;
  background: #fafafa url("http://www.honigwine.com/assets/images/global/tabs/arrow-down.png") no-repeat 90% 50%;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  float: left;
}
.search select {
  padding: 10px 0px;
  height: 55px;
  width: 100%;
  border: none;
  box-shadow: none;
  background: transparent;
  cursor: pointer;
}
.search select .option {
  padding: 10px 0px;
  width:100%;
} 
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

＆＃13;

<div class="search">
  <select>
    <option value="" class="option">Choose something</option>
    <option value="">One</option>
    <option value="">Two</option>
    <option value="">Three</option>
  </select>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您还可以使用包含所需背景图像的伪元素。

.search {
  position: relative;
  border: 1px solid #ccc;
  width: 250px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  float: left;
}
.search:after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 10%;
  height: 100%;
  background: #fafafa url("http://www.honigwine.com/assets/images/global/tabs/arrow-down.png") no-repeat 90% 50%;
}
.search select {
  padding: 10px 18px;
  height: 55px;
  width: 110%;
  border: none;
  box-shadow: none;
  background: transparent;
  cursor: pointer;
}
.search select .option {
  padding: 10px 18px;
  width: 250px;
}

<div class="search">
  <select>
    <option value="" class="option">Choose something</option>
    <option value="">One</option>
    <option value="">Two</option>
    <option value="">Three</option>
  </select>
</div>

Answer 3

option中有一个appearance设置none到select，另一个{}可以设置background position并隐藏选择箭头img 1}} top如下，

.search {
    border: 1px solid #ccc;
    width: 250px;
    overflow: hidden;
    background: #fafafa url("http://www.honigwine.com/assets/images/global/tabs/arrow-down.png") no-repeat 100.4% 48%;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    float: left;
}

.search select {
    padding: 10px 18px;
    height: 55px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    cursor: pointer;
}

.search > select > .option {
    padding: 10px 18px;
        width: 250px;
}

<div class="search">
  <select>
			    <option value="" class="option">Choose something</option>
			    <option value="">One</option>
			    <option value="">Two</option>
			    <option value="">Three</option>
			  </select>
</div>