选择菜单 CSS [关闭]答案

【问题标题】：Select menu CSS [closed]选择菜单 CSS [关闭]
【发布时间】：2017-08-29 10:26:05
【问题描述】：

我尝试在菜单中心对齐文本，但它不起作用，并且悬停在菜单阴影上也不起作用。请问您有解决办法吗？

在这里摆弄：

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;
}

【问题讨论】：

寻求调试帮助的问题必须包含重现它所需的最短代码在问题本身中。 注意 - 请不要滥用代码块来解决这个问题要求.

标签： html css select menu

【解决方案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>

【讨论】：

【解决方案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;
  }

【讨论】：