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:

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:

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

Teach you to connect to MySQL database using eclipse

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

Teach you to connect to MySQL database using eclipse

mysql command line script execution example

Solutions to MySql crash and service failure to start

Detailed analysis of the chmod command to modify file permissions under Linux

Detailed tutorial on setting up multiple instances of MySQL 8 on CentOS 7 (you can have as many as you want)

Detailed tutorial on installing Anaconda3 on Ubuntu 18.04

Implementation of Nginx configuration of local image server

Two methods of MySql comma concatenation string query

An article teaches you how to use Vue's watch listener

Manually implement js SMS verification code input box

Recommend

Nginx Location directive URI matching rules detailed summary

Detailed steps for configuring mysql8.0.20 with binlog2sql and simple backup and recovery

Introduction to Royal Blue Color Matching for Web Design

Sample code for implementing the Olympic rings with pure HTML+CSS

How to redirect to other pages in html page within two seconds

MySQL Null can cause 5 problems (all fatal)

Detailed explanation of the solution to the problem of automatic disconnection of xshell remote connection

How to implement batch deletion of large amounts of data in MySQL large tables

How to sort a row or column in mysql

A detailed introduction to the redesign of the Weibo component on the website (pictures and text)

A brief discussion on the implementation principle of Webpack4 plugins

Detailed explanation of writing multiple conditions of CSS: not

Detailed graphic tutorial on silent installation of oracle12.2 on CentOS under VMware

How to use JS code compiler Monaco

Media query combined with rem layout in CSS3 to adapt to mobile screens