开发者

Html form input button with default OS style: How to make it glow\light up?

So having <li><FORM><INPUT class="eButton" type="button" value="Ole"></FORM></li> is it possible to make such class glow\lightup as if it notifies user about something, while it shall have default OS look on Linux, Mac and Windows?

So let us look onto simple example: http://jsfiddle.ne开发者_高级运维t/uDdbq/10/ what I need is simulate mouse over recursivly with out mouse over and with some other, not default color (yellow for example)

Like glowing from this state:

Html form input button with default OS style: How to make it glow\light up?

to this

Html form input button with default OS style: How to make it glow\light up?

again and again.


You can't tint it without a hack (overlaying a semi-transparent element), and with the varying button styles across browsers, there's no way to get the border radius perfect, unfortunately.

If you're OK with an imperfect glow, here's how: http://jsfiddle.net/minitech/vXKrE/ (click the button to activate its glow)

Add some error-handling in the JavaScript and it actually degrades gracefully since the background has no effect on browsers that don't support rgba.


You could give it a colored box-shadow on focus:

box-shadow: 0 0 3px yellow;

Obviously works with browsers that support box-shadow

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜