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

Xftp download and installation tutorial (graphic tutorial)

If you want to transfer files between Windows and...

MySQL 8.0.20 compressed version installation tutorial with pictures and text

1. MySQL download address; http://ftp.ntu.edu.tw/...

Common repair methods for MySQL master-slave replication disconnection

Table of contents 01 Problem Description 02 Solut...

MySQL 8.0.11 installation tutorial with pictures and text

There are many tutorials on the Internet, and the...

Implementation code for adding slash to Vue element header

<template> <div class="app-containe...

Solution to MySql service disappearance for unknown reasons

Solution to MySql service disappearance for unkno...

javascript:void(0) meaning and usage examples

Introduction to void keyword First of all, the vo...

Vue uses canvas handwriting input to recognize Chinese

Effect picture: Preface: Recently, I was working ...

An article to deal with Mysql date and time functions

Table of contents Preface 1. Get the current time...

mysql creates root users and ordinary users and modify and delete functions

Method 1: Use the SET PASSWORD command mysql -u r...

HTML uses form tags to implement the registration page example code

Case Description: - Use tables to achieve page ef...

Detailed installation and configuration of Subversion (SVN) under Ubuntu

If you are a software developer, you must be fami...