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
精彩评论