改变组合框设计[关闭]答案

【问题标题】：Changing combobox design [closed]改变组合框设计[关闭]
【发布时间】：2015-09-08 11:58:36
【问题描述】：

我尝试在组合框的 css 中更改边框颜色和背景，但它不起作用：

我有这个 HTML 代码：

<select class = "form-control" style = "border:2px solid white;background:skyblue">
   <option value = "newest"> Newest </option>
   <option value = "oldest"> Oldest </option>
</select>

我只是想：

移除组合框边框
移除组合框的箭头
将组合框的背景设置为天蓝色。

如果我不能附上任何图片，我很抱歉，所以要求我至少有 10 个 repu 才能发布图片。请帮我解决这个问题。谢谢

更新： 我还在引导程序中尝试了btn-info，但仍然无法正常工作..

【问题讨论】：

只需添加图片的链接/分享网址，我会为您附上图片..
我已将这张图片保存在我的电脑中。
可能重复 - stackoverflow.com/questions/11118491/…

标签： html css

【解决方案1】：

试试这个

获取Help

.styleSelect select {
  background: transparent;
  width: 168px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
  color: #000;
}

.styleSelect {
  width: 140px;
  height: 34px;
  overflow: hidden;
  background: none;
  border: 2px solid #fff;
  background:skyblue
  
}

<div class="styleSelect">
  <select class="units">
    <option value="Metres">Newest</option>
    <option value="Feet">Feet</option>
    <option value="Fathoms">Oldest</option>
  </select>
</div>

【讨论】：

多亏了这个，它现在真的很好用:)
抱歉，由于缺乏声望，无法投票。

【解决方案2】：

完成。
您只能在 webkit 浏览器中执行此操作。
完成。

如果您想更好地设置组合框的样式，则必须编写一些代码或使用插件，例如：select2

select {
  -webkit-appearance:none;
  appearance:none;
  border:0;
  background:skyblue;
}

<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

【讨论】：

也感谢这个:)
抱歉，由于缺乏声望，无法投票。