从Chrome中删除图像中的红色圆圈

Question

我知道Chrome会在按钮和图片周围添加蓝色边框。 但是，我遇到了Chrome的另一件事。

我有一张图片，我想像按钮一样。单击时，星形图像会出现红色圆圈。 （不在其他浏览器中。）

图像的代码是这样的： <input type="image" src="star.png">

这是css：

input[type=image]{
  width: 18px;
  height: 18px; 
  cursor: pointer; 
  outline: none;
  border-style: none;
}

奇怪的是，圆圈并不包围图像（这是一个正方形），而是＆＃34;内容＆＃34;图像。

我怎样摆脱这个？

谢谢。

screen grab: red circle around an image

Answer 1

选择时使用焦距选择器

 input[type=image]:focus {
 outline: none;
 border-style: none;
 }

工作pen