我正在尝试为我的搜索表单定义一个自定义 CSS 按钮。我不明白为什么这个特定的按钮周围有一个奇怪的边框?我需要将其删除,但无法弄清楚它在 css..code 和下面的 fiddle 中的来源。
/* 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>
谢谢
最佳答案
您正在将 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*/
}
关于html - CSS 按钮有边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28221415/