4

この問題はクロムでのみ発生します。画像の周りの境界線を削除するにはどうすればよいですか? クロムのフィドルを見てください。

<form>
    <input type="image" class="searchbox_submit search_btn" value="">
</form>

form input[type=text]:focus, form input[type=password]:focus, textarea:focus {
    outline: none;
}

.search_btn {
    background: url("http://static.ak.fbcdn.net/rsrc.php/v1/yu/r/yo348KDuskF.png") no-repeat scroll 0px -200px transparent;
    height: 25px;
    width: 30px;
    outline: none;
    border: none;
    outline-width: 0;
    -webkit-appearance: none; 
}​

デモ: http://jsfiddle.net/TXYg6/

4

6 に答える 6

10

を使用し<input type="image" />ているため、src属性が必要です。指定していないため、imgsrc属性のない場合と同じように、Chrome は灰色の境界線を表示します。

<input type="image" />CSS スプライトの使用に固執したい場合は、1x1 の透明な「blank.gif」など、何かを として指定する必要があります。src

http://jsfiddle.net/thirtydot/TXYg6/14/

しかし、それは恐ろしいようです。<input type="submit" />代わりに、問題を解決するに切り替えることをお勧めします。

于 2012-05-10T22:24:54.143 に答える
2

そのように送信タイプに置き換えます

<input type="submit" class="searchbox_submit search_btn" value="">

CSSの高さと幅を修正

于 2012-05-10T22:31:45.380 に答える
1

URIsrcを使用して空白のイメージを指定します。data:Chrome のみに関心があるため、問題はありません。

<input type="image" class="searchbox_submit search_btn" value="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII=">

http://jsfiddle.net/TXYg6/23/

于 2012-05-10T22:28:20.163 に答える
1

Chrome は、src のない画像に境界線/アウトラインの機能を提供します。入力タイプを「送信」に設定すると、これはなくなります。

または、 を src とともに使用して、これから送信をトリガーしますが、単に type="submit" を使用することもできます

不要なクロム枠

于 2012-05-10T22:28:53.070 に答える
0

att type="image" は本当に必要ですか? それが問題の原因だから…

于 2012-05-10T22:21:01.773 に答える
0

意味的にはbutton、実際には関連付けられた入力値がないため、 a を使用することをお勧めします。したがって、それは入力ではありません。

<button type="submit" class="searchbox_submit search_btn"></button>

ドキュメントから：

BUTTON 要素で作成されたボタンは、INPUT 要素で作成されたボタンと同じように機能しますが、より豊富なレンダリングの可能性を提供します。BUTTON 要素にはコンテンツが含まれる場合があります。たとえば、画像を含む BUTTON 要素は、タイプが「画像」に設定されている INPUT 要素と同様に機能し、類似している可能性がありますが、BUTTON 要素タイプはコンテンツを許可します。

乾杯

于 2012-05-10T22:37:30.067 に答える