6

私はボタンを持っています：

ここに画像の説明を入力してください オン

ここに画像の説明を入力してください オフ

CSSは次のとおりです。

.searchButton {
  height: 31px;
  width: 33px;
  cursor: pointer;
  border: none;
  background:url(../img/searchButton-Off.png) no-repeat;
}

.searchButton:hover {
  height: 31px;
  width: 33px;
  cursor: pointer;
  border: none;
  background:url(../img/searchButton-On.png) no-repeat;
}

HTMLは次のとおりです。

  <div class="searchBox">
    <h2 style="color:000000;">Search</h2>
    <form id="form_297586" class="appnitro"  method="get" action="results.php">
      <input id="keywords" name="keywords" class="searchBar" title="What do you like...?" type="text" maxlength="255" value=""/>
      <input type="button" class="searchButton" />
      <input type="hidden" name="form_id" value="297586" />
    </form>
  </div>

これが私のブラウザがレンダリングしているものです：

ここに画像の説明を入力してください Safari ここに画像の説明を入力してください Opera

ボタンの上にマウスを置くと、正しく切り替わり、ボタン全体が表示されます。この動作が発生している理由がわかりません。

考え？

4

4 に答える 4

8

ボタンには、多くのデフォルトのスタイルが関連付けられています。次のようなリセットスタイルシートの実装を検討してください。

エリックマイヤーのリセット

Normalize.css

また、要素を設定display: blockまたは表示する必要があります。inline-block寸法を設定できるようにするためです。

最後に、問題の簡単な例をJSFiddleまたはDabbletに入れて、人々が簡単に手助けできるようにすることをお勧めします。

お役に立てれば！

編集：あなたの例を見ることができたので、問題は、bootstrap.cssのデフォルトのスタイルがあなたのスタイルよりも高い特異性を持っているということです。何かのようなもの：

input.searchButton

問題を解決する必要があります。

于 2012-04-17T18:33:06.067 に答える
3

これはおそらく特異性の場合であり、より具体的な条件のセットが優先されます。

これを試して：

.searchButton { 
  height: 31px !important; 
  width: 33px !important; 
  cursor: pointer; 
  border: none; 
  background:url(../img/searchButton-Off.png) no-repeat; 
}

または、次のことを試すことができます。

form.appnitro .searchButton {
于 2012-04-17T18:32:55.357 に答える
2

間違い！

あなたが持っている

あなたも使用しています： 

input[type=button].[class name]

または、次を使用できます。

<button class='x' ></button>

およびCss：

button.x{
}
于 2018-08-22T22:09:35.763 に答える
0

背景：url（ "../ img / searchButton-Off.png"）white no-repeat 9px;

9pxを任意のpxに変更し、それに応じて変更し、height：50px weight：50pxも増やします。

于 2012-04-17T18:25:09.540 に答える