CODEWITHSUNDEEP
cssgoogle-chromeborder
anvd
anvd

Reputation: 4047

chrome border issue

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/

Upvotes: 4

Views: 2872

Answers (6)

Madbreaks
Madbreaks

Reputation: 19539

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

Upvotes: 0

thirtydot
thirtydot

Reputation: 228162

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.

Upvotes: 10

khaled_webdev
khaled_webdev

Reputation: 1430

replace it like that with submit type

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

correct your css height and width

Upvotes: 2

Thomas Hudspith-Tatham
Thomas Hudspith-Tatham

Reputation: 471

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

Upvotes: 1

Ry-
Ry-

Reputation: 224867

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/

Upvotes: 1

rafaelbiten
rafaelbiten

Reputation: 6240

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

Upvotes: 0

Related Questions