html - 输入按钮保持未格式化

标签 html css button

关于格式化的输入按钮,我有一个非常特殊的问题。

在我的第一页上,我创建了一个名为“ button”的css规则,用于格式化单独排成一行的按钮。效果很好,并且按钮出现如下图所示



此按钮的css在下面

.button {
    width: 100%;
    height: 15mm;
    background-color: #AAA;
    color: #FFFFFF;
    font-size: 20px;
    text-shadow: 0px -2px #888;
    border:none; !important
    -moz-box-shadow:    0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
    -webkit-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
    box-shadow:         0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;

}


在html中,它看起来像这样:

<a href="dashboard.html">
  <input class="button" type="button" value="SUBMIT" action="dashboard.html" />
</a>


问题是,我复制了此规则,并在第二页中对平行按钮进行了稍微修改,但它没有格式化按钮。奇怪的是,它出现在Dreamweaver中



但在任何浏览器中,它都会丢失其格式



这是并行按钮的CSS

.2buttons {
    width: 40%;
    height: 15mm;
    background-color: #AAA;
    color: #FFFFFF;
    font-size: 20px;
    text-shadow: 0px -2px #888;
    border:none; !important
    -moz-box-shadow:    0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
    -webkit-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
    box-shadow:         0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;

}


这是HTML

<a href="report.html">
  <input class="2buttons" type="button" value="OK"/>
</a>


奇怪的是,即使您将适用的第一个CSS规则应用于这些按钮,它们仍然保持未格式化的状态。

最佳答案

您的代码中有两件事。

第一
切勿以数字开头类和ID名称。

像这样的.buttons2而不是这个.2buttons编写。

&第二

这样写

border:none !important; 


代替这个:

border:none; !important

关于html - 输入按钮保持未格式化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12596838/

相关文章:

css - HTML, CSS : Why does my layout mess up on different resolutions?

javascript - 单击下拉列表时关闭下拉列表

android - 我们如何改变java代码中的按钮大小

php - 使用唯一 ID 标记按钮并在单击的按钮上标识此 ID 值

javascript - HTML Canvas 中可以有多个剪辑区域吗?

javascript - iframe src更改时如何运行函数?

javascript - 滚动属性不适用于 iframe

button - 在Galleria中以全屏模式关闭按钮

javascript - 如何使输入字段的高度响应内容?

html - 菜单中的子菜单显示在带有母版页的网页形式的内容下,如何解决这个问题