chrome border issue

Question

I only have this problem in chrome. How remove the border around the image? please see the fiddle in chrome.

<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; 
}

Demo: http://jsfiddle.net/TXYg6/

Side note: your image is offcenter, it should be width: 30px, height: 30px, `url("http://static.ak.fbcdn.net/rsrc.php/v1/yu/r/yo348KDuskF.png") no-repeat scroll 0px -192px ` — Travis J, May 10 '12 at 22:27
possible duplicate of [input type="image" shows unwanted border in Chrome and broken link in IE7](http://stackoverflow.com/questions/4108983/input-type-image-shows-unwanted-border-in-chrome-and-broken-link-in-ie7) — animuson, May 10 '12 at 22:30

thirtydot · Accepted Answer · 2012-05-10T22:33:06.777

10

You're using <input type="image" />, so a src attribute is expected. You haven't specified one, so Chrome shows a grey border, in the same way it does for an img with no src attribute.

If you want to stick to using <input type="image" /> and using a CSS sprite, you're going to have to specify something as the src, such as a 1x1 transparent "blank.gif".

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

However, that just seems horrible. Instead, I recommend switching to <input type="submit" />, which solves the problem.

edited May 10 '12 at 22:33

answered May 10 '12 at 22:24

thirtydot

224,678
48
389
349

2

Or an alternative is to just use `type="submit"` since by default a `type="image"` will submit the form as well. – animuson May 10 '12 at 22:27
@animuson - I think `` is better still, since you don't actually have an input associated with the button. – Madbreaks May 10 '12 at 22:34
@Madbreaks: I don't think there's such thing as a `type` attribute on a ` – Ry- May 10 '12 at 22:35
@minitech: There is, and the missing value default is `submit`. – animuson May 10 '12 at 22:37
@animuson: Huh. I need to get out more. – Ry- May 10 '12 at 22:38
@minitech You are wrong: http://www.w3.org/TR/html4/interact/forms.html#h-17.5 -- and correct it's not a self-closing tag (see my answer) that was just for terseness in a comment. As for `` not being an input? I'm a fan of the *semantic web*. Use the right tool for the job - just because an `` works doesn't it mean it's the *right* element to use. – Madbreaks May 10 '12 at 22:39
@minitech I agree. But you also told me there was no such thing as a `type` attribute on the button element. I at least *had* to call you out there. :) – Madbreaks May 10 '12 at 22:43
@Madbreaks: Yeah, Googling beforehand helps :( – Ry- May 10 '12 at 22:43

score 2 · Answer 2 · answered May 10 '12 at 22:31

2

replace it like that with submit type

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

correct your css height and width

answered May 10 '12 at 22:31

khaled_webdev

1,420
15
20

score 1 · Answer 3 · answered May 10 '12 at 22:28

Give it a blank image as a src using a data: URI. Since you're only concerned with Chrome, there's no problem:

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

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

score 1 · Answer 4 · edited May 23 '17 at 11:50

1

Chrome gives a border/outline thingo to any image without a src, you could set the input type to 'submit' and this will go away.

Alternatively, use an with a src and trigger the submit from this, but you may as well just use a type="submit"

unwanted chrome borders

edited May 23 '17 at 11:50

Community

1
1

answered May 10 '12 at 22:28

Thomas Hudspith-Tatham

471
3
13

score 0 · Answer 5 · answered May 10 '12 at 22:21

0

Do you really need that att type="image"? Because that's the thing causing the problem...

answered May 10 '12 at 22:21

rafaelbiten

6,074
2
31
36

Madbreaks · Answer 6 · 2012-05-10T22:45:16.630

Semantically I'd say use a button since you don't actually have an associated input value, and as such it's not an input:

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

From the docs:

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.

Cheers

chrome border issue

6 Answers6

Linked

Related