如何使选定的输入框/图像更加突出显示？

Question

当用户专注于选定的输入框，图像，下拉框时，是否有一种快速方法可以突出显示？

目前在输入框上你会看到一个浅黄色的黄色方框，我希望它更明显，所以可能是一个更厚的黄色方块或什么东西？

Answer 1

你不需要jQuery：

<style>
:focus { outline: solid red }
</style>

outline的美妙之处在于它（与border不同）在添加或删除页面时不会改变页面的布局;它始终位于内容之上。

如果您需要在这方面支持旧浏览器，那么您需要更复杂的代码。

Answer 2

对input元素使用jQuery：

$('input').focus(function(){
    $(this).css('backgroundColor','#FF0000'); // red background color
});

对于选择框：$('select').focus(function(){

对于图片：$('img').focus(function(){

如果您想更改边框而不是背景颜色，只需将backgroundColor更改为border即可。或者您想要更改的任何其他CSS属性。另请查看jQuery CSS documentation。

并使用.blur()功能将其更改回来。

$('input').blur(function(){
    $(this).css('backgroundColor','none'); // no background color
});

使用input作为选择器，这些行适用于所有输入框。

Answer 3

这样的事情：

$(document).ready(function() {
  $("#yourInoutId").focus(function() {
    $(this).css("border", "1px solid yellow");
  });
});

Answer 4

你可以试试这个：

style="border:solid 3px red"

怎么样？

$(this).css("border", "solid 3px red");

Answer 5

你可以在css中使用focus伪类来实现这个目的。 Check this

这里有另一个使用jquery的例子

Check this