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 need to do something like this, if i understood your question:

.button-search{border:0px;background-color:inherit;}
.button-search:focus{outline:none;}

Answer 2

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 3

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

Answer 4

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 5

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 6

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; }