我在将下拉菜单中的元素居中时遇到问题。 我已经尝试了该网站上建议的许多方法，但似乎都不起作用。
这是我的 CSS:
select {
-webkit-appearance: button;
-webkit-user-select: none;
-webkit-padding-start: 6px;
-webkit-padding-end: 6px;
background-color: #050505;
color: #ffffff;
border: 1px solid #ffffff;
box-shadow: 11px 10px 5px #000000;
text-shadow:4px 4px 10px #000000;
font-family: "UglyQua", Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
white-space: nowrap;
}
..和我的 HTML:
<!DOCTYPE html>
<html>
<head>
<script language="javascript" type="text/javascript">
function jump(form) {
var myindex=form.menu.selectedIndex
if (form.menu.options[myindex].value != "0")
{
window.open(form.menu.options[myindex].value,
target="iframe1");
}
}
//-->
</script>
</head>
<center>
<body>
<form name="lissamenu2" ACTION=URI>
<select name="menu" onchange="jump(this.form)">
<option value="0" selected>Select site:</option>
<option value="http://www.google.com/">Google</option>
<option value="http://www.youtube.com/">YouTube</option>
<option value="http://www.stackoverflow.com/">StackOverflow</option>
</select>
</form>
</center>
</body>
</html>
最佳答案
SELECT/OPTION 不能在常规 HTML 元素中接受相同的样式，因为它们与操作系统的联系更紧密。您会注意到 SELECT 在 Mac 和 PC 上看起来会有所不同。如果您想要更多控制权，最好使用基于 JavaScript 的替代品。
参见:http://www.jankoatwarpspeed.com/reinventing-a-drop-down-with-css-and-jquery/
关于javascript - 无法将我的菜单选项项居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18986667/