CSS Button有一个边框 [英] CSS Button has a border

问题描述

我试图为我的搜索表单定义一个自定义css按钮。我无法弄清楚为什么这个特定的按钮有一个奇怪的边框吗？我需要删除它，但无法弄清它是从哪里来的内css..code和小提琴下面。

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

推荐答案

将所有CSS应用于按钮内的跨度，因此该按钮的默认样式仍在使用中。凌乱的< span> ，而且，正如@Christoph在评论中所说， type =submit ，因为它是按钮的默认功能：

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> 

将CSS应用于输入：

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*/
}

< a href =http://jsfiddle.net/q3t2srfg/1/ =nofollow> http://jsfiddle.net/q3t2srfg/1/

这篇关于CSS Button有一个边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！