0

First and foremost; I know that a lot of these CSS-type questions have been closed, so, hopefully I've been able to broaden the question to fit others aswell. Here goes:

I've been handed a project and am doing my best with adding the features my boss wants me to. But when I try to style a button differently from the rest, the changes don't "take".

The css file works as I am able to style other things:

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

Button:

<input type="submit" value="Print." class="fakeBtn" id="fakeBtn" />

CSS tries:

.fakeBtn
{
    font-size: 0.8em;
    border: 0px;
    background-color: transparent;
    color: #999;
    cursor: hand;
}

input#fakeBtn
{
    font-size: 0.8em;
    border: 0px;
    background-color: transparent;
    color: #999;
    cursor: hand;
}

As you can see I've tried using a class to change the style and also the id approach. None of which works though. I've hardly done any mvc work and this, already existing, project is my first. Is it a logical error? What am I doing wrong?

EDIT:

Could any of these be overriding? These are all the css-snippets I could find with "input" in them. How does one know if something overrides something else?

input, textarea {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    font-size: 1.2em;
    margin: 5px 0 6px 0;
    padding: 5px;
    width: 300px;
}

    input:focus, textarea:focus {
        border: 1px solid #7ac0da;
    }

    input[type="checkbox"] {
        background: transparent;
        border: inherit;
        width: auto;
    }

    input[type="submit"],
    input[type="button"],
    button {
        background-color: #d3dce0;
        border: 1px solid #787878;
        cursor: pointer;
        font-size: 1.2em;
        font-weight: 600;
        padding: 7px;
        margin-right: 8px;
        width: auto;
    }

    td input[type="submit"],
    td input[type="button"],
    td button {
        font-size: 1em;
        padding: 4px;
        margin-right: 4px;
    }

input.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}
4

2 回答 2

1

CSS看起来不错。

尝试使用 Firebug 来验证应用了哪些样式以及覆盖了哪些样式。

我怀疑您还有其他一些 CSS 规则来设置按钮样式并覆盖您的 CSS。

于 2013-04-25T13:41:23.827 回答
1

如果这是纯 html，那么您的代码看起来不错，很明显您的 css 根本没有被加载和读取，或者它在稍后的某个阶段被覆盖。

您可以尝试应用important（如color: #999 ! important;），看看是否有任何更改变得可见。如果是这样，您就知道 CSS 属性正在其他地方被覆盖。

另一方面，我看到 Asp.Net 和 MVC 缓存在这里引起了一些问题。您可能想尝试删除站点并从头开始重新发布，看看是否有任何更改。

更新：

我相信这可能是你的问题：

input, textarea {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    font-size: 1.2em;
    margin: 5px 0 6px 0;
    padding: 5px;
    width: 300px;
}

这指定了 type 的样式input，所以如果它出现在 之后.fakeBtn { ...}，则将应用该样式（当然，除非您已添加! important;到某些语句的末尾，在这种情况下，它们只会被其他也包含的语句覆盖! important;）。

您最好的解决方案可能是在该部分添加特定的类：input, textarea { ...}. 这样，它通常不会覆盖其他输入字段。

于 2013-04-25T13:47:33.390 回答