Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 504
  • 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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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