How to change the highlighting style?

In Google Chrome, an highlighted (= selected, when your cursor is inside) textbox is surrounded by an orangish开发者_开发问答 colored line which is not very distintly visible.

Is there a way to change this using CSS? I want to enhance the highlight even more.

---

Like this:

input:focus {
    outline: 15px solid pink;
}

---

If you want to keep the blur effect on the border here's an example of how to do this.

http://jsfiddle.net/pxfunc/aE4PY/

You can prevent the default Chrome behavior by setting outline:none on input itself which will also apply to any pseudo class (like :focus)

input {
    border:solid 1px #aaa;
    outline:none;
}
input:focus {
    -webkit-box-shadow: 0 0 4px yellow;
     -khtml-box-shadow: 0 0 4px yellow;
       -moz-box-shadow: 0 0 4px yellow;
        -ms-box-shadow: 0 0 4px yellow;
         -o-box-shadow: 0 0 4px yellow;
            box-shadow: 0 0 4px yellow;
}

In order for the box-shadow to work I had to manually set the border. Also, the most current versions of browsers support box-shadow without vendor prefixes.

for some bonus effects like rounded corners and transition easing check this post out http://blog.gesteves.com/post/475773360/css-glow-effects-with-box-shadow