选择菜单 CSS

Question

>我试图在菜单中心对齐文本，但它不起作用，并且将鼠标悬停在菜单阴影上也不起作用。请问你有什么解决方案吗？

在这里摆弄：

https://jsfiddle.net/6towqd38/1/

CSS code
  select {
  border: 0 none;
  color: black;
  background: transparent;
  font-size: 14px;
  padding: 6px;
  width: 100%;
  *width: 100%;
  *background: #58B14C;
}
#mainselection {
  overflow: hidden;
  width: 100%;
  background: #4CAF50;
  text-align: center;
}
#select:hover {
  box-shadow: 0 0 20px blue;
}

Answer 1

这是你需要的吗？

  select {
    border: 0 none;
    color: black;
    background: transparent;
    font-size: 14px;
    padding: 6px;
    width: 100%;
    background: #58B14C;
    text-indent: 50%;
}
#mainselection {
  overflow: hidden;
  width: 100%;
  background: #4CAF50;
  text-align: center;
}
select:hover {
  text-shadow: 1px 1px red;
  box-shadow:1px 1px red;
 }

<div id="mainselection">
  <select>
    <option>Select options</option>
    <option>1</option>
    <option>2</option>
  </select>
</div>

Answer 2

  select {
  border: 0 none;
  color: black;
  background: transparent;
  font-size: 14px;
  padding: 6px;
  width: 100%;
  width: 100%;
  background: #58B14C;
  text-align: center;
}
option {text-align:center;}
#mainselection {
  overflow: hidden;
  width: 100%;
  background: #4CAF50;
}
select:hover {
  text-shadow: 2px 2px 5px #00ff00;
  box-shadow: 2px 2px 5px #555555;
  }