All geek questions in one place

Input: focus does not work in Firefox

I have the following style that I checked is loading:

input:focus { outline: none; }
:focus { outline: none; }

I did this to stop showing the dashed rectangle when I click on something. This works for everything I noticed in FireFox, with the exception of the enter buttons. My input buttons still show a rectangle with dots around them when I click on them.

How can I make them stop doing this?

+3
source share
3 answers

I needed to do this ( source ):

/*for FireFox*/
input[type="submit"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner { border : 0px; }

/*for IE8 */
input[type="submit"]:focus,
input[type="button"]:focus { outline : none; }

I already had "outline: 0" set on everything with reset, but in order to get rid of the dashed line on the CSS-style button, I needed -moz-focus-inner.

+4

<input ... onfocus="this.blur();"/>

jQuery:

$("input").focus(function(){this.blur();});
+2

( firefox 2, 3)

<html>
<head>
  <title>Test</title>
  <style>
   :focus { -moz-outline-style: none;}
  </style>
</head>
<body>
  <form action="#">
    <input type="image" src="button.png" />
  </form>
</body>
</html>

Just add button.png :-)

+1
source

Source: https://habr.com/ru/post/1717401/

More articles:


All Articles