Question

我正在尝试为我的搜索表单定义一个自定义css按钮。我无法弄清楚为什么这个特殊的按钮周围有一个奇怪的边框？我需要删除它，但无法弄清楚它来自css..code中的位置和下面的小提琴。

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

由于

Answer 1

您正在将CSS应用于按钮内的跨距，因此仍然使用该按钮的默认样式：

摆脱所有混乱的<span>，正如@Christoph在评论中所说，type="submit"可以省略，因为它是按钮的默认功能：

<div class="form-search">

<button title="<?php echo $this->__('Search') ?>" class="button-search">Search</button>
</div>

将CSS应用于输入：

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

按钮有边框，默认为背景。

删除它们，并且会很好。

但我不认为将按钮添加到按钮是有效的。

解决方案在这里：（css）

button.button-search { background: transparent; border: none; position:absolute; right:10px; top:8px; }

Answer 3

如果您在代码上方添加以下代码，它将起作用：

button {
        border: medium none;
        margin: 0;
        padding: 0;
}

此代码重置了浏览器中的一些默认样式。

Answer 4

这种情况正在发生，因为您需要通过定义自己的类来覆盖默认样式，例如＆＃39;更改＆＃39;： -

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

更新了小提琴： - http://jsfiddle.net/ynwypqw2/

Answer 5

看起来需要不同html结构的解决方案适合您。但是要回答原始问题，这里是让button尊重您的自定义样式的css解决方案：

button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    border: 0;
}

这告诉Safari和Chrome（webkit），Firefox（moz）和符合标准的浏览器不强制执行默认的button样式，然后确保没有填充或边框。

Answer 6

如果我理解你的问题，你需要做这样的事情：

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

Answer 7

使用此.button-search{ border: 0; padding: 0; }

CSS Button有一个边框

7 个答案: