input focus outer glow

Question

is it possible to simulate the outer glow that safari and other browsers add to an input field? And avoiding jquery if possible?

This article explains how to remove it: http://www.altrugon.com/css/remove-safaris-input-focus-outer-glowquitar-el-border-azul-de-los-inputs-en-safari/

Thanks

score 22 · Accepted Answer · edited Jun 20 '20 at 09:12

22

Check out the DEMO

Here box-shadow is used in combination with :focus psudo selector.

CSS:

input:focus,textarea:focus,select:focus{
  border:1px solid #fafafa;
  -webkit-box-shadow:0 0 6px #007eff;
  -moz-box-shadow:0 0 5px #007eff;
  box-shadow:0 0 5px #007eff;
  outline: none;
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 20 '11 at 17:37

Sarfraz

377,238
77
533
578

@user441365: You can check out CSS3Pie that claims to make box-shadow work in IE: http://css3pie.com/. I haven't tried it though. – Sarfraz Jan 20 '11 at 17:52
I never really had the need for this feature until I saw this answer. +1 for the tip. – itsols Jun 14 '11 at 02:22
you should add `outline: none` – roberkules Mar 11 '12 at 07:10
@roberkules: You are right, I had not checked it in Chrome :) updated now. – Sarfraz Mar 11 '12 at 07:11

score 0 · Answer 2 · answered Jan 20 '11 at 17:35

0

If you wanted to simulate it exactly as it's displayed on webkit browsers you could use CSS3 Box shadow using the :focus pseudo class, although note that CSS3 is not supported on all browsers.

answered Jan 20 '11 at 17:35

amosrivera

26,114
9
67
76

score 0 · Answer 3 · answered Jan 20 '11 at 17:38

0

You can do it with css:

input:focus
{
    outline:#00FF00 solid thick;
}

This is the html:

<input />
<br/>
<br/>
<input />

answered Jan 20 '11 at 17:38

Kees C. Bakker

32,294
27
115
203

input focus outer glow

3 Answers3

Check out the DEMO

Linked

Related