Question

我尝试更改提交按钮，但它不能正常工作。

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>

外表有很多不同。所有按钮必须看起来像第一个按钮和第四个按钮。我不明白为什么提交按钮有这个边框。这是截图： Screenshot

    Any ideas guys how can i fix it ?

Answer 1

当您指定一个元素时，就像您为输入类型=提交设置样式一样，它会超越类的规则，因此您必须标准化所有输入类型= submit，然后使用每个类的样式化附加规则。

在你的情况下，你可以简单地在输入类型=提交的样式中放置一个边框：0 none，边框将为所有提交消失。

以下是我在链接http://zip.net/bhmYLW

中稍微优化的代码

避免使用与输入[type =＆＃34;提交＆＃34;]一样深的样式而没有适当的继承，这可能会导致很多问题。

Answer 2

您正在设计两个完全不同的元素，这就是它们看起来不同的原因。 input元素具有div和a元素所没有的默认样式。

您需要检查元素并查看需要覆盖的默认样式。根据您的屏幕截图，我猜这样的事情可能适用于边界：

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

http://jsfiddle.net/rD2Jz/

Answer 3

我无法评论Dryden的答案，所以我只想补充一下：

你正在造型的元素可能已经添加了一些风格，这是混合了一些东西。确保你的css文件是在页面上调用的最后一个文件，因此它所做的更改是重要的。

祝你好运！

CSS提交表单看起来不应该

3 个答案: