Question

我知道select元素难以定型，我知道很多问题都是关于它们的。但绝大多数似乎适用于select元素本身或其中option元素的样式。我的两个都不是。我想做两件事：

1 - 向DROPDOWN添加边框半径（不是select，而不是options - 但是点击select时显示的下拉框，其中包含{{ 1}}元素。

2 - 删除Chrome在此下拉框中不必要显示的垂直滚动条。

这可以完成A），B）只有CSS和原生的option元素吗？

Answer 1

您可以使用 ul li 来应用更多样式。请检查下面给出的代码段，以便您执行更多样式设置。

document.getElementById("dmenu").addEventListener("click",function(){
    
    if(document.getElementById("menu").style.display === "none"){
        document.getElementById("menu").style.display = "block";
    }
    else{
        document.getElementById("menu").style.display = "none";
    }
});

ul,li{
  list-style:none;
  margin:0 ! important;
  padding:0 ! imortant;
  }
#menu{
  border:1px solid #000;
  border-radius:5px;
  display:none;
  }
li{
  border:1px solid #000;
  background-color:blue;
  color:#fff;
  
  }
li:hover {
  background-color:yellow;
  color:red;
  }

<select id="dmenu"> </select>
<ul id="menu">Menu
  <li>opt1</li>
  <li>opt2</li>
  </ul>

Answer 2

以下几种可能符合您需求的款式

related forum

从css中添加几个片段

.styled-select {
   background: url(http://www.ericrasch.com/media/icon-selectbox.png) no-repeat 96% 0;
   height: 29px;
   overflow: hidden;
   width: 240px;
}

.styled-select select {
   background: transparent;
   border: none;
   font-size: 14px;
   height: 29px;
   padding: 5px; /* If you add too much padding here, the options won't show in IE */
   width: 268px;
}

设置选择输入的DROPDOWN样式

2 个答案: