CSS Button has a border

Question

I am trying to define a custom css button for my search form. I cant figure out why this particular button has a strange border around it? I need to get it removed but cannot

Answer 1

You are applying the CSS to the spans inside the button, so the default styling for the button is still being used:

Get rid of all the messy , and, as @Christoph said in the comments, type="submit" can be omitted, as it is the default functionality of a button:

Search
 

Apply the CSS to the input:

button.button-search::-moz-focus-inner { padding:0; border:0; } /* FF Fix */
button.button-search { -webkit-border-fit:lines; } /* <- Safari & Google Chrome Fix */
button.button-search { position:absolute; right:10px; top:8px; } 
button.button-search { 
    background: #3399CC; /* Old browsers */
    box-shadow:1px 1px 0 #a4a4a4; 
    display:block;
    float:none;
    width:88px; 
    height:32px; 
    line-height:30px; 
    text-align:center; 
    font-size:15px; 
    color:#fff;
    text-align:center !important;
    border:none;/*Removes the border*/
}

http://jsfiddle.net/q3t2srfg/1/