javascript - 提交图像按钮的焦点未在 IE 8 中突出显示

Question

我正在尝试使用 javascript 函数突出显示图像的选择，但这在使用 IE 时似乎没有任何效果，但在 Chrome 中可以正常工作。有人可以让我知道如何在 IE 中突出显示提交图像（按钮）吗？

HTML提交按钮代码：

   <input type="submit" onfocus="changeBorder(this);" onclick="saveDeviceInfo();" 
   title="Save" alt="Save" value="Save" id="save-button" style="background-image: 
   url(btn.png); border: 2px solid rgb(51, 129, 183); background-position: initial initial; 
   background-repeat: repeat no-repeat;">

JS函数：

function changeBorder(_this){
    jQuery(_this).css("border","2px solid #3381b7");
}

编辑：

我尝试将以下 CSS 添加到我的 CSS 文件中，但它似乎在 IE 8 中仍然不起作用。

#save-button:hover{
   border: 1px solid #3381b7;
}       
#save-button:focus{
   border: 4px solid #3381b7;
}   

#save-button:focus{ 
   outline: #177f7f dotted medium; 
}

#save-button:selected{ 
   outline: #177f7f dotted medium; 
}

Answer 1

这是一个小提琴

HTML

<input type="submit" onclick="saveDeviceInfo();" title="Save" alt="Save" value="Save" id="save-button">

CSS

#save-button {
  border: 2px solid rgb(51, 129, 183);
  background-image: url(btn.png);
  background-position: initial initial;
  background-repeat: no-repeat;
}
#save-button:hover{
  border: 1px solid #3381b7;
}       
#save-button:focus{
  border: 4px solid #3381b7;
  outline: #177f7f dotted medium; 
}
#save-button:selected{ 
  outline: #177f7f dotted medium; 
}

jQuery

$(function() {
  $('#save-button').click(function() {
    $(this).css({ border: '2px solid #ccc'});
  });
});

Answer 2

您可以使用 CSS，例如：

#save-button{
  background:url('btn.png') no-repeat;
}
#save-button:hover{
  background:url('btn2.png') no-repeat;
}

或者

#save-button{
  background-image:url('btn.png'); background-repeat:no-repeat;
}
#save-button:hover{
  background-image:url('btn2.png'); background-repeat:no-repeat;
}