Onfocus del botón Enviar imagen no se resalta en IE 8

I am trying to highlight the selection of a image using a javascript function but this doesn't seem to have any effect when using IE but works fine in Chrome. Can someone let me know how to highlight the submit image(button) in IE?

HTML submit button code:

   <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;">

Función JS:

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

EDIT:

I tried adding the below CSS to my CSS file, but still it doesn't seem to work in 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; 
}

preguntado el 09 de septiembre de 13 a las 23:09

I'd kindly suggest you to use a .css file for your styles. It can make life easier to you and to somebody else that might inherit your project one day. -

have you tried onFocus, with the f capitalized? I'm spitballing here but it might make a difference. -

@Overcode. What? You shouldn't camel case event listeners. While it might work in HTML, it's a bad habit because it won't work in JavaScript. -

I am starting to cringe when I see code in markup... -

2 Respuestas

You could use CSS, like:

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

or

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

Respondido el 09 de Septiembre de 13 a las 23:09

Aquí hay una Violín

HTML

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

CO

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

Respondido el 10 de Septiembre de 13 a las 00:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.