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

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

html css

仅使用CSS在html中自定义选择框,html,css,Html,Css,我有一个选择框，我已经定制了一点只使用css，但我不能让它的功能根据要求这是HTML页面的完整代码 <html> <head> <style> select { -webkit-appearance:none; background-color:#58B14C; background-position:initial initial; background-repeat:initial initial; border:0; bor

我有一个选择框，我已经定制了一点只使用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>


挑选{
-webkit外观：无；
背景色：#58B14C；
背景位置：初始；
背景重复：初始；
边界：0；
边框左下半径：8px；
边框右下半径：8px；
边框左上半径：8px；
边框右上角半径：8px；
颜色：#EEEEEE；
字体大小：20px；
字体大小：粗体；
左边距：3倍；
填充：2x10px；
宽度：347px；
}
#主选择{溢出：隐藏；宽度：407px；
-moz边界半径：9px 9px 9px 9px；
-webkit边界半径：9px 9px 9px 9px；
边界半径：9px 9px 9px 9px；
盒影：1px 1px 11px#330033；
背景：url（“img/arrow.gif”）无重复滚动362px 6px黑色；}
选择一个选项
选择1
选择2

运行此代码后，输出看起来像我上传的图像。当我点击绿色部分时，下拉菜单会正常工作。我是说下拉菜单的工作方式。但我希望当我点击箭头时，下拉列表会下降。因此，无论对背景div应用了什么装饰，都可以将其插入select的css中。和图像一起？或者任何可以编写以获得所需功能的javascript？

您是否尝试将背景应用于选择框本身而不是父容器？@Kai Qing Yea但我如何将多种颜色背景应用于选择框。我希望外观与图像相似。单击“外部”无法打开选择框@我没问题。我用另一种方式工作。但这是真的，除非您自己编写，否则无法使用javascript打开选择框。