Home > Developer > JavaScript
The three-state image button is essential for a good user experience. I processed dom events and implemented three-state buttons without changing the html. The key to the solution below is to remove the dotted line selection box and locate the background without loop processing. If any button defines the background image and border as 0, it is automatically changed to a three-state button.
<Body> <button style = "width: 53; height: 17; border: 0; background: url (http://www.jb51.net/upload/button_a.png)"> </button> </body>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The above solution also has some shortcomings, that is, in firefox, you cannot use the Tab key to locate the button. This is because the click event is blocked to remove the dotted box. The following program solves this problem by creating an invisible button in the button, which transfers the focus.
<Style> button {border: 0 }</style> <body> <button style = "width: 53; height: 17; background: url (http://www.jb51.net/upload/button_a.png) "> </button> </body>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
