select 下拉列表菜单选择器定制样式

CSS

select：元素标签

DashSelecter：定义类

hover active visited：鼠标动作响应样式

select.DashSelecter{ /*默认样式*/
    width: 25.99999%;
    height: 50px;
    font-size: 14px;
    color: #7f7f7f;
    outline: none;
    border: 1px solid #9e9e9e66;
    border-radius: 3px;
    padding: 10px;
    margin: 5px 0 8px 0;
}

select.DashSelecter:hover { /*悬停样式*/
   border-color: #007bff8f;
  }

select.DashSelecter:active {  /*点击样式*/
  border-color: #007bff;
  }

select.DashSelecter:visited { /*点击后样式*/
  border-color: #fff;
}

HTML

DashSelecter：类名

<form action="" method="post">
  <select name="mySelect" class="DashSelecter" required>
    <option class="optionGroup" value="jobID"> 单号</option>
    <option class="optionGroup" value="staffId"> 工号</option>
    <option class="optionGroup" value="staffName"> 姓名</option>
    <option class="optionGroup" value="staffMail"> 邮箱</option>
  </select>
  <input type="text" class="Dash" name="myInput" required="required"/>
</form>

获取更多

指定 From ID，select 元素即使不在 Form 标签中也可关联。

<form action="" id="cityForm">
  <input type="text" name="myName">
  <input type="submit">
</form>
<select name="carlist" form="cityForm">
  <option value="beijing">beijing</option>
  <option value="shanghai">shanghai</option>
  <option value="changsha">changsha</option>
  <option value="wuhan">wuhan</option>
</select>