设置输入类型按钮的默认 css答案

【问题标题】：Set default css of input type button设置输入类型按钮的默认 css
【发布时间】：2013-11-22 04:30:30
【问题描述】：

我在输入类型按钮上应用背景图像。为此，我在 style.css 中编写了我的代码。但现在我希望该按钮看起来像默认按钮，但我的限制是我不能从 style.css 中删除 css 样式。但我可以在其他 css style1.css 中覆盖它。那么我该如何覆盖呢？

style.css

button
{
background:red;
}

如果我像这样覆盖它什么都不会显示。

style1.css

button
{
background:none;
}

【问题讨论】：

stackoverflow.com/questions/381100/…

标签： html css

【解决方案1】：

Can you style html form buttons with css? 的问题可能重复。

好吧，就按钮或任何其他输入类型而言，您可以通过添加以下内容来做到这一点：

HTML

<input type="submit" name="submit" value="Submit Application" id="submit" />

CSS

#submit {
    background-color: #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:6px;
    color: #fff;
    font-family: 'Oswald';
    font-size: 20px;
    text-decoration: none;
    cursor: poiner;
     border:none;
}



#submit:hover {
    border: none;
    background:red;
    box-shadow: 0px 0px 1px #777;

}

你甚至可以试试这个，

input[type="submit"]{
  background: #fff;
  border: 1px solid #000;
  text-shadow: 1px 1px 1px #000;
}

甚至，你可以添加一个类：

.my_button_type
 {
  background: #fff;
  border: 1px solid #000;
  text-shadow: 1px 1px 1px #000;
}

您也可以应用内联样式：

<input type="button" style="background: #333; border: 0px;" />

所以，你有很多方法可以做到这一点。

【讨论】：

【解决方案2】：

您可以使用内联样式，也可以使用!important。

例子：

style1.css

    button
    {
         background:none !important;
    }

或内联：

<button style="background: none;">

【讨论】：

请不要在 CSS 中使用!important，这是非常糟糕的做法。

【解决方案3】：

你可以这样做......

button { background:none !important; }

【讨论】：

我必须设置按钮的默认外观（看起来像 Windows 制造的），像你那样做是行不通的:(

【解决方案4】：

首先，优先级很重要：

 <link rel="stylesheet" href="style.css" />
 <link rel="stylesheet" href="style1.css" />

您必须将 css 文件放在要覆盖的原始 css 之后。

其次，在您的style1.css 中，有很多方法可以实现您想要的。比如取消想要覆盖的css样式

//style.css
button {
    background: url("...");
}

//style1.css
button {
    background: none;
}

或将!important 用于您要实现的属性。

【讨论】：