Question

我的网站上有一个选择。有以下内容：

...
<select name="opening-form-gender" id="opening-form-gender">
    <option value="f">Female</option>
    <option value="e">Male</option>
</select>
...

CSS：

#opening-form {
  background-image: url('../img/opening-form-bg.png');
  background-repeat: no-repeat;
  height: 139px;
  margin: 40px auto;
  padding: 20px;
}
#opening-form p {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  color:#666666;
}
#opening-form strong {
    font-size:20px;
}

#opening-form .submit {
  background-image: url('../img/red-submit.png');
  border: none;
  width: 115px;
  height: 31px;
  line-height: 28px;
}
#opening-form .submit:hover {
  background-image: url('../img/red-submit-hover.png');
}

所以，它有一个风格问题。我该如何解决？

这是jsfiddle页面：

http://jsfiddle.net/HLEcS/

Answer 1

尝试类似的事情;

select{
  width: 175px;
  border: 1px solid #e7e7e7;
  background-image: url('../img/input-bg.png');
  font-weight: regular;
  font-size:12px;
  color: #666666;
  padding: 7px;
}

Here 是经过修改的小提琴。

Answer 2

在WebKit（Chrome，Safari）上，您可以通过应用属性来禁用原生样式并使用您自己的样式进行自定义：

-webkit-appearance: none;

不幸的是，这在Gecko（Firefox）中不起作用。见https://bugzilla.mozilla.org/show_bug.cgi?id=649849

Firefox上的虚线边框由默认属性outline引起。见How to remove Firefox's dotted outline on BUTTONS as well as links?

应通过向父母应用vertical-align: top来修复对象。请提供完整的HTML或小提琴进行测试。

Firefox上的Html“选择”位置？

2 个答案: