Remove the a label and button and add the background image dotted line/shadow perfect solution

Remove the a label and button and add the background image dotted line/shadow perfect solution

When a user registers, they will click on a label to change the verification code. When clicked, there is a shadow part on the a label. But this is intolerable for students who like aesthetics!

完美去掉a標簽和按鈕加背景圖片陰影

What is the reason for this? It turns out that the href attribute of the a tag is to blame.

1. Just a tag

There are two solutions I know of.

First: prescribe the right medicine for the disease. Since it is caused by href. Then remove the href attribute

When we use href=javascript:RefreshCode(); we just update the verification code. No page jump.

Copy code
The code is as follows:

<ahref="javascript:RefreshCode();"class="yellow">Can't see clearly? Change picture</a>

So you can remove href, add an onclick event to the a tag, and call the update verification code function.

Copy code
The code is as follows:

<aonclick="RefreshCode()"class="yellow">Can't see clearly? Change picture</a>

Second: Take a step back. Seek common ground while reserving differences. Since you want to use the href attribute. All right. Then I'll add another event for you: onfocus

Just modify it and you can perfectly remove it by adding onfocus="this.blur()" to the a tag.

certainly. If you want the a tag to not be underlined. Then: style="text-decoration: none"

Copy code
The code is as follows:

<a href="javascript:RefreshCode();"class="yellow"onfocus="this.blur()">Can't see clearly? Change picture</a>

Effect after modification

完美去掉a標簽和按鈕加背景圖片陰影

In FF and other browsers, it is relatively easy. Just define the style outline:none for the tag a, that is:

Copy code
The code is as follows:

a{ outline:none; }

Of course this is just removing a single one. If there are multiple a tags on the page, shouldn't we add onfocus events one by one?

Of course not. We can do this when the page loads. Get all the a tags on the page through: window.document.links.length (window can be omitted here). Then iterate over the registered events.

Copy code
The code is as follows:

<scripttype="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:

Another if you add a background image to the button. There will be shadows.

完美去掉a標簽和按鈕加背景圖片陰影

The same approach can also be used to achieve

Copy code
The code is as follows:

<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="Registration" name="regist" onfocus="this.blur()"onclick="return checkAll()" style="background-image:url('image/btn.jpg')"/>

Effect after modification:

完美去掉a標簽和按鈕加背景圖片陰影

3. If you add an a tag to img, then add onfocus to the a tag and set the border attribute of img: border=0

Copy code
The code is as follows:

<a href="#none" onfocus="this.blur()">
<img style="border:0px">
</a>

If your page has both a tag. There is a button again. You can wrap it into a function

Copy code
The code is as follows:

function fHideFocus(tName){
aTag=document.getElementsByTagName_r(tName);
for(i=0;i<aTag.length;i++)aTag.hideFocus=true;
//for(i=0;i<aTag.length;i++)aTag.onfocus=function(){this.blur();};
}

Currently, a hidefocus attribute is added, and its value is a Boolean value, such as hideFocus=true. You can also omit the assignment and directly hideFocus.

If the code does not have hideFocus, then when the mouse clicks the hyperlink, a dotted box will appear outside, indicating focus. If hideFocus is used, there will be no dotted frame.

The commented-out sentence is to add onfucus = this.blur(); which has the same effect.
Then call fHideFocus("A"); to remove the dotted frame of a. You can remove different dotted frames by passing different parameters. For example, "BUTTON" can remove the dotted frame of button, but remember that the parameters must be capital letters.

Extensions:

A. How to remove the dotted lines of links within a map area?

This is a conceptual error. In fact, it should be controlled on the map image, not in the area. Refer to the traditional method

B. About onFocus

Copy code
The code is as follows:

<a href="http://blog.sina.com.cn/s/articlelist_3015911503_0_1.html"onfocus="this.blur()">
<img style="border:0px">
</a>

Among them, onfocus is used to set the mouse focus event. This can be used or not. However, in order to allow more browsers to recognize it, it is recommended to use border=0. This is the key to removing the dotted frame (on the Internet, most people use onfocus="this.blur()" to remove the dotted frame, but sometimes, this sentence alone cannot remove it)

For the experts, the knowledge points are already very outdated. But for friends who have just come into contact with it, it is a timely relief, and I just happened to encounter it today. So it is recorded here. Knowledge must be accumulated bit by bit.

<<:  Solve the problem of 8 hours difference between docker container and host machine

>>:  Detailed introduction to CSS font, text, and list properties

Recommend

Solution to Django's inability to access static resources with uwsgi+nginx proxy

When deploying uwsgi+nginx proxy Django, access u...

How to implement mask layer in HTML How to use mask layer in HTML

Using mask layers in web pages can prevent repeat...

CSS stacking and z-index example code

Cascading and Cascading Levels HTML elements are ...

Problem analysis of using idea to build springboot initializer server

Problem Description Recently, when I was building...

Implementation example of Vue+Element+Springboot image upload

Recently, I happened to be in touch with the vue+...

Detailed explanation of common operations of Docker images and containers

Image Accelerator Sometimes it is difficult to pu...

CSS sets the list style and creates the navigation menu implementation code

1. Set the list symbol list-style-type: attribute...

MySQL 8.0.25 installation and configuration method graphic tutorial

The latest download and installation tutorial of ...

Detailed explanation of the principle of js Proxy

Table of contents What is Proxy Mode? Introducing...

Solution - BASH: /HOME/JAVA/JDK1.8.0_221/BIN/JAVA: Insufficient permissions

1) Enter the folder path where the jdk file is st...

Sample code for a simple seamless scrolling carousel implemented with native Js

There are many loopholes in the simple seamless s...

MySQL reports an error: Can't find file: './mysql/plugin.frm' solution

Find the problem Recently, I found a problem at w...

JS+Canvas realizes dynamic clock effect

A dynamic clock demo based on Canvas is provided ...

Tutorial on installing MySQL 5.6 on CentOS 6.5

1. Download the RPM package corresponding to Linu...