如何编写显示单个类的三个图像按钮？

Question

我想完成一项任务。该任务的主要目标是显示带有padding differencde 10px的图像按钮。

这是我的html输出：

<div width="100%" style =" float:right"  >
    <input type="image" value="resources/images/btn-tabl.png"  class ="tabl_btn"/>
    <input type="image" value="resources/images/btn-map.png" class ="tabl_btn"/>
     <input type="image" value="resources/images/btn-graph.png" class ="tabl_btn"/>
</div>

CSS：

.tabl_btn {
    width: 62px;
    height: 28px;
    padding-top: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
    box-shadow: none !important;
} 

按钮显示填充，但是当我点击填充空间时也会显示。

我如何只显示按钮？

有什么建议吗？

Answer 1

我认为您真正要问的是如何消除Chrome和Firefox中显示的焦点大纲。这是通过应用以下代码完成的：

input[type="image"]:focus,
input[type="image"]:active {
color: red;
outline: none;

}

这是fiddle。