从图像上的alt标记文本中删除边框

Question

我试图从alt标签文本中删除边框。我使用透明图像作为贝宝形式的按钮，通过CSS链接。 paypal按钮将alt标记作为其按钮文本并在其周围放置边框。我不清楚为什么会发生这种情况，但这是我必须与paypal合作的内容。显然我必须使用图像。因此，我使用透明图像，因此我可以在css中设置样式，使其看起来像我的其他按钮，而不是尝试获取每个按钮状态的屏幕截图。

我将代码配对，专注于文本边框＆＃39;查看购物车＆＃39;。

CSS

//link to my transparent button with no text on it
#vyc {
      background-image: url(http://lakenney.com/kenney_lucille-final/images/vyc.png) no-repeat;
  }
//the user agent that is controlling the outer border
user agent stylesheetinput[type="hidden" i], input[type="image" i], input[type="file" i] {
      -webkit-appearance: initial;
      padding: 20px;
      background-color: initial;
      border: dotted;
      border-top-color: red;
  }
//a couple of tags I'm using to try to access the alt tag border not working
#vyc img[alt] {
      /*border: 1px dashed #3D8EA5;*/
      border: transparent !important;
  }
input#vyc img[alt] {
      border: transparent !important;
  }

HTML                   

以下是此相同代码的jsfiddle链接： http://jsfiddle.net/lakenney/w0zpmutn/

Answer 1

你可以使用透明图像来消除边框，但是你没有替代文字，但你可以覆盖一些文字。

＆＃13;

＆＃13;

document.querySelector('#input1').onfocus = function() {
    console.log('clicked');
    this.blur();
}

＆＃13;

label {
    position: relative;
    width: 100px;
    display: inline-block;
    line-height: 3rem;
    height: 3rem;
    background: blue;
    border: 0;
    border-radius: 5px;
}
input {
    width: 100px;
    height: 100%;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    color: #FFF;
    text-decoration: none;
}

＆＃13;

<label for="input1">
    <input id="input1" type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" />
    <a class="overlay" href="#input1">
        Some Text
    </a>
</label>

＆＃13;

＆＃13;

＆＃13;

但表单操作将不再有效。所以你必须使用javascript提交表格/重定向页面。

Answer 2

输入（type =＆＃34; image＆＃34;）需要一个丢失的src图像，因此需要边框。您是否可以将透明图像作为src值？

<input type="image" src="http://lakenney.com/kenney_lucille-final/images/vyc.png" id="vyc" border="0" name="submit" value="View Cart" alt="View Cart">

http://jsfiddle.net/w0zpmutn/2/