如何移除HTML中input图片按钮的白色边框

解决方案 #

• 方案1：清除input元素默认边框
  浏览器会给input[type="image"]默认自带边框，直接在你的.KassTvCSS规则中新增两行属性即可：

.KassTv{
    position: absolute;
    top: -213px;
    left: -382px;
    display: inline-block;
    background-image: url("Images/KassTv.png");
    /* 新增以下两行 */
    border: none;
    outline: none;
}

.KassTv:hover{
    background-image: url("Images/LitTv.png");
}

border:none直接消除默认白色边框，outline:none可以同时去掉点击按钮时出现的外轮廓线。

• 方案2：补全input标签的src属性
  type="image"的input原生需要指定src属性作为展示内容，你当前只设置了背景图，src为空时浏览器会显示图片加载失败的占位框，自带边框。可以直接把背景图地址填到src属性中：

<form action="Home.htm">
    <input type="image" src="Images/KassTv.png" name="KassTv" class="KassTv" height="266" width="266" value="">
</form>

• 方案3：替换为button标签实现相同效果
  button标签的默认样式更容易自定义，不会有奇怪的自带边框，适配性更好：
  HTML部分修改为：

<form action="Home.htm">
    <button type="submit" class="KassTv"></button>
</form>

CSS部分调整为：

.KassTv{
    position: absolute;
    top: -213px;
    left: -382px;
    width: 266px;
    height: 266px;
    border: none;
    outline: none;
    padding: 0;
    background: transparent url("Images/KassTv.png") no-repeat;
    cursor: pointer;
}

.KassTv:hover{
    background-image: url("Images/LitTv.png");
}

内容的提问来源于stack exchange，提问作者Khalil Ibrahim