css - 如何编写代码以显示单个类的三个图像按钮？

Question

我想完成一项任务。该任务的主要目标是显示具有 10 像素内边距差异的图像按钮。

这是我的 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 .