Question

我有一个选择框，我只使用css定制了一点，但我无法根据要求使其运行。

这是HTML页面的完整代码

<html>
<head>


<style>
select {
  -webkit-appearance:none;
  background-color:#58B14C;
  background-position:initial initial;
  background-repeat:initial initial;
  border:0;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  color:#EEEEEE;
  font-size:20px;
  font-weight:bold;
  margin-left:3px;
  padding:2px 10px;
  width:347px;
}

#mainselection { overflow:hidden; width:407px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background:url("img/arrow.gif") no-repeat scroll 362px 6px black; }
</style>

</head>
<body>
<div id="mainselection">
<select>
<option>Select an Option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</body>
</html>

运行此代码后，输出看起来像我上传的图像。当我点击绿色部分时，下拉列表的工作方式应该如此。我的意思是下拉的方式。但是当我点击箭头时，我希望下拉列表能够降下来。因此，无论装饰是否应用于背景div，它都可以插入到select的css中。和图像一起？或者可以编写任何javascript以获得所需的功能？ enter image description here

仅使用CSS自定义html中的选择框

0 个答案: