Html CSS按钮有一个边框
我试图为我的搜索表单定义一个自定义css按钮。我不明白为什么这个按钮周围有一个奇怪的边框?我需要把它删除,但无法找出它是从css中来的。下面的代码和小提琴Html CSS按钮有一个边框,html,css,button,Html,Css,Button,我试图为我的搜索表单定义一个自定义css按钮。我不明白为什么这个按钮周围有一个奇怪的边框?我需要把它删除,但无法找出它是从css中来的。下面的代码和小提琴 /* Define Search Button */ button.button-search::-moz-focus-inner { padding:0; border:0; } /* FF Fix */ button.button-search { -webkit-border-fit:lines; } /* <- Safari &
/* 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
button.button-search { background: transparent; border: none; position:absolute; right:10px; top:8px; }
如果在代码上方添加以下代码,则它将起作用:
button {
border: medium none;
margin: 0;
padding: 0;
}
这段代码重置了浏览器中的一些默认样式。这是因为默认样式,您需要通过定义自己的类来覆盖它,例如“更改”:-
<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;
}
更新的小提琴:-您正在将CSS应用于按钮内的跨距,因此按钮的默认样式仍在使用: 摆脱所有的混乱,正如@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*/
}
使用此.button search{border:0;padding:0;}如果我理解您的问题,您需要这样做:
.button-search{border:0px;background-color:inherit;}
.button-search:focus{outline:none;}
看起来需要不同html结构的解决方案适合您。但要回答最初的问题,这里有一个css解决方案,用于获得一个按钮以尊重您的自定义样式:
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
border: 0;
}
这会告诉Safari和Chrome webkit、Firefox moz以及符合标准的浏览器不要强制执行其默认按钮样式,然后确保没有填充或边框。您正在将css应用到按钮内的一个范围……它来自按钮的默认样式,但我不确定如何修复它。您可能会考虑使用除按钮之外的元素,例如,A为什么使用按钮,而您可以使用“@雅各伯是正确的”——请简单地将CSS直接应用到按钮并设置边框:“无”;kgh正确的方法是border:none;:所以你可以用这个按钮搜索{border:0;padding:0;}不太可能,他的问题是边框,不是边距,当然也不是填充。即使他确实需要,内联样式也不是实现它的方法!哦,对不起,我弄错了。这个按钮在这里很好用。毕竟,这是一个按钮应该做的。但是,他可以省略该类型,因为submit是按钮的默认操作。否则答案很好,回答得很好。工作完美,修改模板-不确定为什么所有这些跨度都存在?谢谢大家的帮助。这些跨度看起来像是CMS中所见即所得编辑的产物。这就是你在做的吗?