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
stevaAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobinSoftware EngineerCommented:
0
JF0Commented:
a {
   outline: none;
}
0
JF0Commented:
Sorry, so used to answering this question but for links not buttons. Try this instead:
button:focus {}
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

stevaAuthor Commented:
JFO:

Where exactly does the button:focus{}  go, and shouldn't there be something between the braces?
0
SteveZzCommented:
input#down:focus{ border:1px dotted black;}
input#up:focus{border:1px dotted black;}

That should be what you''re looking for.
0
SteveZzCommented:
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.
0
SteveZzCommented:
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.
0
SteveZzCommented:
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?
0
SteveZzCommented:
Okay I figured out this time. I promise.

First off, outline:none works.  For IE 7, IE 8, Chrome.  Firefox is where your problem lies.  So keep outline:none in your code for both #up and #down.

The next needed thing for firefox to not show it is.

onfocus="this.blur();"

So the end result of code looks like this.

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

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

</style>

<input type="button" id="up"   value=" + " onclick="addone(myfield);"onfocus="this.blur();">  
<input type="button" id="down" value=" - " onclick="subtractone(myfield);"onfocus="this.blur();">
And that should work for you.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
stevaAuthor Commented:
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
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.