asked on

Getting rid of dotted border on focus

I have two buttons, below, that get an annoying dotted line around them when they have the focus, as the right button has in the attached figure. I've tried outline:none; but that doesn't get rid of it. How can I keep this dotted border from appearing?

Thanks

input#up
{
float:left;
position:relative;
bottom:19px;
width:120px;
height:120px;
font-size:19px;
font-family:"courier new";

}
input#down
{
float:left;
position:relative;
bottom:19px;
width:120px;
height:120px;
font-size:19px;
font-family:"Courier New";
outline:none;
}

<input type="button" id="up" value=" + " onclick="addone(myfield);">
<input type="button" id="down" value=" - " onclick="subtractone(myfield);">

buttons.png

Robin Uijt

Will the following link help you?

http://www.html-faq.com/scriptingnavigation/?removefocus

JF0

a {
outline: none;
}

JF0

Sorry, so used to answering this question but for links not buttons. Try this instead:
button:focus {}

steva

ASKER

JFO:

Where exactly does the button:focus{} go, and shouldn't there be something between the braces?

SteveZz

input#down:focus{ border:1px dotted black;}
input#up:focus{border:1px dotted black;}

That should be what you''re looking for.

SteveZz

My apologies that doesn't quite work. I'm looking at something now that is almost working but it loses its appearance as a button. Hopefully I'll get back to you shortly.

SteveZz

I took more of a look at it and this works but seems to create other potential problems. Depending on the look you want. When you change the border style of a button type the appearance of the button changes.

<input type="button" id="up" value=" + " onclick="addone(myfield);" onmouseover="this.style.border='1px dotted black';" onmouseout="this.style.border='0px dotted black';">
<input type="button" id="down" value=" - " onclick="subtractone(myfield);" onmouseover="this.style.border='1px dotted black';" onmouseout="this.style.border='0px dotted black';">

This code works for adding and removing a border on hover and when the mouseleaves. The only problem and you will see it when you test it is that the buttons appearance changes whent he border appears. I'm sure you can go from here using css to edit the buttons appearance to look how you want. A possible simple solution to this problem that i'd suggest looking into would be taking a screenshot of the button the way you want it. Setting that as the buttons background image input#up{background-image:url('yourimage.png');} so that the image doesn't disappear. (haven't tested that, just brainstorming). Hope this works how you want it.

SteveZz

Wow, I haven't been helpful at all to this point. I understand the problem now but can't replicate it. What browser are you using?

ASKER CERTIFIED SOLUTION

SteveZz

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

steva

ASKER

Steve:

Thanks. The onfocus="this.blur();" works for FF. Unfortunately I'm having another problem now with each browser centering the text differently when the buttons are the small size that I want, as shown in the attached image. I'll post this as a new question in HTML/CSS: "Browsers centering button text differently" if you want to look at it. I gave you the points for this one.

Thanks again
buttons.png