Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 508
  • Last Modified:

Customizing Focus Rectangle

Is there any way in which the dotted line that come around the link when it gets focus to be appearing in a bold and maybe in some other color.
My target browser is Mozilla Firefoc 0.9.3.

Thanks in advance.
0
Vinod_nk
Asked:
Vinod_nk
  • 2
1 Solution
 
ziffgoneCommented:
Nope. It is out of our control.

At most, you can make it disappear with an onClick="this.blur();" statement. Otherwise, that's it.
0
 
garethdart24Commented:
I couldn't get this to work quite right, but I'm posting it anyway in case it gives you or anyone else any ideas.  Dynamically adjusting the appearance of links with CSS sort of works, as below.  Each time you click a link, it's class is set to 'custom', which has a black 1px border in this case.  When you click on another link, the previous link's class is returned to 'normal', which has a white 1px border (I would use no border but that makes the links move by 1px when clicked, and that's unprofessional) and the new link's class is set to 'custom'.  The flaw is that if the next mouse click is not on one of the links, then the last link clicked retains the border even though it no longer has the focus.  You can probably solve this, though.

<html>
<head>
<style>

a.custom {

padding: 0px 0px 0px 0px;
border-style: solid;
border-width: 1px;
border-color: #000000;

}

a.normal {

padding: 0px 0px 0px 0px;
border-style: solid;
border-width: 1px;
border-color: #ffffff;

}

</style>
<script>

//declare and initialise a variable to hold the last clicked link
var lastLink;

lastLink = "link1";

lastLink.className = "normal";

function customFocus(theLink) {

lastLink.className = "normal";
theLink.blur();
theLink.className = "custom";
lastLink = theLink;

}

</script>
</head>
<body>
<br />

<a class = "normal" id = "link1" href = "#" onfocus = "this.blur()" onclick = "customFocus(this);">Click</a><br />
<a class = "normal" id = "link2" href = "#" onfocus = "this.blur()" onclick = "customFocus(this);">Click</a><br />
<a class = "normal" id = "link3" href = "#" onfocus = "this.blur()" onclick = "customFocus(this);">Click</a><br />
<a class = "normal" id = "link4" href = "#" onfocus = "this.blur()" onclick = "customFocus(this);">Click</a><br />

</body>
</html>

Careful, though: many users don't like the default behaviour of a browser being changed by individual web pages (this.blur makes it harder to cycle through links with the tab key, for example, if you call it from the onfocus event), so you may want to abandon this concept anyway.

G
0
 
Vinod_nkAuthor Commented:
This solves the problem. thanks a lot....
0
 
garethdart24Commented:
You're welcome.  Thanks for the points.

G
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now