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 の点線のアウトラインを削除する方法を参照してください。

vertical-align: top親にa を適用することにより、配置を修正する必要があります。テストする完全な HTML または Fiddle を提供してください。

于 2012-08-28T09:34:58.903 に答える