0

我有一个选择框，我只使用 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，它可以插入到选择的 css 中。连同图像？或者任何可以编写以获得所需功能的javascript？ 在此处输入图像描述

4

0 回答 0