input type=“image” shows unwanted border in Chrome

Question

html:

<input type="image" />

css:

input[type="image"]
  {  border:0;
     border-color:transparent;
     background:transparent;
     width:150px;
     outline:none;
  }

i don't want to use src="img url", i want to use background:(url) i have added border:0 but still border is coming in chrome

JSFiddle > http://jsfiddle.net/akash4pj/PYKfr/1/

http://stackoverflow.com/questions/4108983/input-type-image-shows-unwanted-border-in-chrome-and-broken-link-in-ie7 — zajd, Mar 12 '14 at 07:12
I looked it up a little and it appears that the border is an indicator for an empty placeholder. It disappears when the input has an image. I might be wrong, but so far this is how I see it. — Gil, Mar 12 '14 at 07:28
@user3171894 When I added an image to it, the border disappeared. http://jsfiddle.net/imtheman/PYKfr/2/ — imtheman, Mar 12 '14 at 07:33
You can find the answer here: http://stackoverflow.com/q/10542868/1420186 — Tony Dinh, Mar 12 '14 at 07:37

score 2 · Answer 1 · edited May 23 '17 at 12:30

2

Add an 1x1 GIF to the src attribute will solve the problem:

<input type="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />

JSFiddle

You can find the answer from a similiar question here: chrome border issue

edited May 23 '17 at 12:30

Community

1
1

answered Mar 12 '14 at 07:43

Tony Dinh

6,668
5
39
58

this is working for me in Chrome 36. Problem for me was I was using an image input but setting the background image using css, so Chrome automatically put some square around the input... border and all that doesn't fix anything – xer21 Aug 23 '14 at 00:02

score 0 · Answer 2 · answered Mar 12 '14 at 07:15

0

Use rather the following CSS property :

border:0px;

or

border:none;

If it doesn't work, check your parent tag, maybe your div or span container have a border set.

answered Mar 12 '14 at 07:15

Alex

4,599
4
22
42

score 0 · Answer 3 · edited Mar 12 '14 at 07:42

0

Try this:

input[type="image"]
{
    border:0;
    border-color:transparent;
    background:transparent;
    width:150px;
    outline:none;
    border-style: none;
}

edited Mar 12 '14 at 07:42

Itay Grudev

7,055
4
54
86

answered Mar 12 '14 at 07:17

nikitz

1,051
2
12
35

score 0 · Answer 4 · edited Mar 12 '14 at 07:42

0

the border: none property should fix it:

input[type="image"]
{  
    border:none;
    border-color:transparent;
    background:transparent;
    width:150px;
    outline:none;
}

edited Mar 12 '14 at 07:42

Max

12,622
16
73
101

answered Mar 12 '14 at 07:21

Code

438
1
5
17

Kheema Pandey · Answer 5 · 2014-03-12T07:39:01.157

0

in you code { you are using 2 times. also you have to call image as CSS background property.

you can use like this.

input[type="image"]{
  border:0 none !important;
  outline:0 none !important;
  -webkit-border:0 none !important; 
  border-color:transparent;
  background:transparent;
  width:100px;
  height:25px;
  display: block;
  background: url("http://lorempixel.com/100/25")
}

here is the Working Demo. http://jsbin.com/kiherove/1/

edited Mar 12 '14 at 07:39

answered Mar 12 '14 at 07:24

Kheema Pandey

9,977
4
25
26

still border is coming but ur img hide it – Mar 12 '14 at 07:26
Add these lines please; it will force to keep the border 0 `border:0 none !important;` `outline:0 !important;` – Kheema Pandey Mar 12 '14 at 07:29
what if you add `Browser prefixes` like make any impact? `-webkit-border:0 none !important; ` – Kheema Pandey Mar 12 '14 at 07:37
by adding vendor prefixes for safari and chrome is it works? check my above comment.. – Kheema Pandey Mar 12 '14 at 08:22

score 0 · Answer 6 · answered Mar 12 '14 at 07:28

0

Sometimes in Chrome when you adjust the Zoom to greater or less than 100%, borders will appear on images. You may not have noticed that the Zoom got adjusted. Its a bit of a long shot, but if your CSS is correct, that may be what it is.

answered Mar 12 '14 at 07:28

Garreth McDaid

2,427
22
34

input type=“image” shows unwanted border in Chrome

6 Answers6

JSFiddle

Linked