Perfectly remove the tag and the button and add the background image shadow.

Source: Internet
Author: User
Tags dashed line

When a user registers, he or she will click a label to change the verification code. After clicking this button, a shadow part is displayed on tag. It is intolerable for those who like beautiful appearance!

 

 

Why? It turned out to be a fault caused by the href attribute of tag.

<A href = "http://blog.sina.com.cn/u/3015911503"> my Sina! </A>

 

1. Only a tag

I know two solutions.

1. remedies. It is caused by href. Remove the href attribute.

When we use href = javascript: refreshcode ();, we only update the verification code. The page is not redirected.

<A href = "javascript: refreshcode ();" class = "yellow"> can't see clearly? Change image </a>

 

Therefore, after removing the href, add the onclick event to the tag and call the update verification code function.

<A onclick = "refreshcode ()" class = "yellow"> can't see clearly? Change image </a>

 

Second, let's move back. While reserving differences. Since you want to use the href attribute. Okay. Then I will add you an event: onfocus

You can remove the onfocus = "This. Blur ()" for the tag after modification ()"

Of course. If you want the label to be ununderlined. Then: Style = "text-Decoration: none"

<A href = "javascript: refreshcode ();" class = "yellow" onfocus = "This. Blur ()"> cannot see clearly? Change image </a>

 

Effect after modification

 

 

In ff and other browsers, it is relatively easy to directly define the style outline: none; For tag a, that is:

A {outline: none ;}

Of course, this is just to remove a single. If there are multiple A tags on the page, wouldn't you add the onfocus event one by one?

Of course not. We can load the page. Obtain all the tags on the page by using the parameter Doc ument. Links. Length (window can be omitted here. Then traverse the registration event.

<SCRIPT type = "text/JavaScript">

Window. onload = function (){
For (VAR I = 0; I <document. Links. length; I ++)
Document. Links [I]. onfocus = function () {This. Blur ()}
}
</SCRIPT>

2. Add a background image to the button:

In addition, if you add a background image to the button. There will be shadow.

 

You can also use the same method.

<Asp: button id = "imgbtnreg" runat = "server" onfocus = "this. blur () "onclientclick =" Return chk_reg (); "onclick =" imgbtnreg_click "text =" Confirm submission "/>

 

<Input type = "Submit" id = "btnreg" value = "register" name = "regist" onfocus = "this. blur () "onclick =" Return checkall () "style =" background-image: URL ('image/btn.jpg ') "/>

 

Effect after modification:

 

 

 

3. if you add a label to IMG, you must set the border attribute of IMG: border = 0 when adding onfocus to a label.

<A href = "# none" onfocus = "This. Blur ()">

</A>

 

If your page already has a tag. There is a button. Then you can encapsulate it into a function.

Function fhidefocus (tname ){
ATAG = Document. getelementsbytagname (tname );
For (I = 0; I <ATAG. length; I ++) ATAG. hidefocus = true;
// For (I = 0; I <ATAG. length; I ++) ATAG. onfocus = function () {This. Blur ();};

}

At present, a hidefocus attribute is added, and its value is a Boolean value, such as hidefocus = true. You can also omit the value assignment and direct hidefocus.

 
CodeIf there is no hidefocus, click the hyperlink, and a dotted box appears outside, that is, focus. When hidefocus is used, no dashed line boxes exist.

 

The commented out sentence is to add onfucus = This. Blur (); with the same effect.
Then call fhidefocus ("A"); To remove the dotted box of.
You can remove different dashed boxes by passing different parameters, such as "button". You can remove the dotted box of the button, but remember to use uppercase letters for parameters.

 

Extension:

A. How do I eliminate the dotted line of links in the map area?

This is a conceptual error. In fact, we should control the map image, rather than in the area. Refer to the traditional method.

B. About onfocus

<A href = "http://blog.sina.com.cn/s/articlelist_3015911503_0_1.html" onfocus = "This. Blur ()">

</A>

Here, onfocus is the thing that sets the mouse focus event. If you lose the focus after clicking it, there will be no shadow. This can be used or used, but to let more browsers recognize it, it is recommended to use; border = 0 is the key to removing the dotted box. For images and so on (on the Internet, most people use onfocus = "this. blur () "to eliminate dotted boxes, but sometimes this sentence cannot be used only)

 

knowledge points are outdated for cool people. However, it was a timely rain for new friends. Today we met. It is recorded here. Knowledge is accumulated by 1.1 points.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.