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

您可以使用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;
}

Answer 2

这是Fiddle

<强> 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'});
  });
});

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

2 个答案: