0

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

...
<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/

4

2 回答 2

2

尝试类似的东西；

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

这是修改后的小提琴。

于 2012-08-28T09:44:58.550 回答
0

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

-webkit-appearance: none;

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

Firefox 上的虚线边框是由默认属性引起的outline。请参阅如何删除 Firefox 在按钮和链接上的虚线轮廓？

对齐应该通过将 avertical-align: top应用于父级来修复。请提供完整的 HTML 或 Fiddle 进行测试。

于 2012-08-28T09:34:58.903 回答