CSS Button has a border - html

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 figure out where it is coming from within the css..code and fiddle below.
/* Define Search Button */
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 > span {
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;
}
button.button-search span span { padding:0; float:none; }
button.button-search:hover > span {
opacity:0.8 !important;filter:alpha(opacity=80) !important;
box-shadow:1px 1px 0 #a4a4a4;
}
.header .form-search button.button-search { }
.header .form-search button.button-search > span { }
.header .form-search button.button-search:hover > span { }
.header .form-search button.button-search span span { }
.header .form-search button.button-search:hover span {}
<div class="header">
<div class="form-search">
<button type="submit" title="<?php echo $this->__('Search') ?>" class="button-search"><span><span>Search</span></span></button>
</div>
</div>
http://jsfiddle.net/fnysccad/
Thanks

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 <span>, and, as #Christoph said in the comments, type="submit" can be omitted, as it is the default functionality of a button:
<div class="form-search">
<button title="<?php echo $this->__('Search') ?>" class="button-search">Search</button>
</div>
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/

Answer 2

Button has border, and background by default.
Remove them, and will be good.
But i dont think its valid to add span into button.
Solution is here: (css)
button.button-search { background: transparent; border: none; position:absolute; right:10px; top:8px; }

Answer 3

This is happening because of default style you need to override it by define your own class for example 'change':-
<button type="submit" title="<?php echo $this->__('Search') ?>" class="button-search change"><span><span>Search</span></span></button>
button.button-search.change{
border:0;
padding:0;
}
Updated fiddle :-http://jsfiddle.net/ynwypqw2/

Answer 4

Looks like solutions requiring a different html structure work for you. But to answer the original question, here's the css solution for getting a button to respect your custom styles:
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
border: 0;
}
This tells Safari and Chrome (webkit), Firefox (moz), and standards-compliant browsers to not enforce their default button styles, and then makes sure there's no padding or border.

Answer 5

If you add the following code above your code, it will work:
button {
border: medium none;
margin: 0;
padding: 0;
}
This code reset some of the default styles in the browsers.

Answer 6

You need to do something like this, if i understood your question:
.button-search{border:0px;background-color:inherit;}
.button-search:focus{outline:none;}

Answer 7

use this .button-search{ border: 0; padding: 0; }