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?
 
SteveZzConnect With a Mentor Commented:
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
 
RobinSoftware EngineerCommented:
0
 
JF0Commented:
a {
   outline: none;
}
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
JF0Commented:
Sorry, so used to answering this question but for links not buttons. Try this instead:
button:focus {}
0
 
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
 
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
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.

All Courses

From novice to tech pro — start learning today.