Question

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

在这里小提琴：

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

这是你需要的吗？

＆＃13;

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

＆＃13;

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

＆＃13;

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

选择菜单CSS

2 个答案: