1

I have put this on JSFiddle for ease.

https://jsfiddle.net/d1Lgm0g1/1/

body {
    background-color: #7f8183;
}

.search-button {
    width: 26px;
    height: 26px;
    background-image: url(https://cdn1.iconfinder.com/data/icons/MetroStation-PNG/252/MB__search.png);
    background-size: 26px, 26px;
    display: inline-block;
    padding-bottom: 2px;
    opacity: 0.7;
    text-indent: 0em;
}
<input type="image" name="input" id="ImageButton1" class="search-button" src="" value="&nbsp;">

As you can see there is a grey (border box?) around my image. I have tried so many different CSS values, i.e. border:none, -webkit-appearance: none, box-shadow: none with no effect. It's not the padding as if padding is set it appears around the grey box.

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
user964111
  • 21
  • 1
  • 3
  • this isn't a `border` issue, if you add a border to your input, another border will appear (beside the gray one), must be something else – Abdul Ahmad Apr 01 '15 at 19:59
  • 1
    this might help http://stackoverflow.com/questions/4108983/input-type-image-shows-unwanted-border-in-chrome-and-broken-link-in-ie7 – Abdul Ahmad Apr 01 '15 at 20:00
  • Right, I noticed that if I change text-indent, e.g. text-indent: 10em, the box shifts. – user964111 Apr 01 '15 at 20:01

0 Answers0