CSS Submit Form看起来不像应该

我试图改变提交按钮，但它不能正常工作。CSS Submit Form看起来不像应该

在CSS

我有我的按钮，它工作得很好：

.button { 
    float: left; 
    clear: both; 
    display: block; 
    width: 150px; 
    padding: 4px 0 5px 0; 
    text-align: center; 
    background: url(images/button_01.jpg) no-repeat; 
    color: #000000; 
    font-size: 14px; 
    font-weight: bold; 
    text-decoration: none; 
}

然后我创建提交类型（很明显的代码是一样的）：

input[type="submit"]{ 
    float: left; 
    clear: both; 
    display: block; 
    width: 150px; 
    padding: 4px 0 5px 0; 
    text-align: center; 
    background: url(images/button_01.jpg) no-repeat; 
    color: #000000; 
    font-size: 14px; 
    font-weight: bold; 
    text-decoration: none; 
}

现在

如果我创建一个HTML页面：

<div class="button"> <a> Check Availability</a></div> 

<input type="submit" value="Send"/> 

<input type="submit" value="Submit" class="button" /> 
<div class="button"> <a> whats up</a></div>

有很大的不同在appeareance。所有按钮必须看起来像第一个按钮和第四个按钮。我不明白为什么提交按钮有这个边框。下面是截图： Screenshot

Any ideas guys how can i fix it ?

来源

2014-03-31 Nick Donovan

如果你只是想删除边框，那么你可以简单地添加'边框：0;'... – Digzol

要样式两种完全不同的元素这就是为什么它们看起来不同。 input元素具有div和a元素不具有的默认样式。

您需要检查元素并查看哪些默认样式需要覆盖。基于关闭您的截图，我猜想，这样的事情可能会为边界工作：

input[type="submit"]{ 
    ... 
    border:none; 
}

http://jsfiddle.net/rD2Jz/

来源

2014-03-31 19:48:17

现在它变得更好:)谢谢男人:) –

-1

我不能评论德莱顿的回答所以我就补充一点：

你正在设计的元素可能已经添加了一些风格，这是混合的东西。确保你的css文件是在页面上被调用的最后一个，所以它所做的更改是那些数字。

祝你好运！

来源

2014-03-31 19:53:31 marcospgp

我想有默认样式需要被覆盖..谢谢。 –

当你指定一个元素，比如你正在为input type = submit设计样式时，它会覆盖类的规则，所以你将不得不标准化他们所有的输入type = submit，然后用另外的样式来设置每个类的样式规则。

就你的情况而言，你可以简单地在输入type = submit的样式中放一个边框：0 none，即所有提交的边框都会消失。

这里是一个我描述了具有作为深使用样式作为输入[类型=“提交”]没有适当的继承一点在链路更优化http://zip.net/bhmYLW

避免代码，这可能会导致很多问题。

来源

2014-03-31 20:53:52 Carra

CSS Submit Form看起来不像应该

回答

相关问题