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

Onfocus of submit image button not getting highlighted in IE 8

本文关键字：显示 IE 按钮 图像 焦点 提交      更新时间：2023-09-26

我正在尝试使用 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; 
}

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

这是一个小提琴

.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'});
  });
});
相关文章：