Question

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

的style.css

button
{
background:red;
}

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

style1.css

button
{
background:none;
}

Answer 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;" />

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

Answer 2

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

示例：

style1.css

    button
    {
         background:none !important;
    }

或内联：

<button style="background: none;">

Answer 3

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

button { background:none !important; }

Answer 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用于您要实施的属性。

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

4 个答案: