1

我有一个使用无法更改的第三方 HTML 的网页。但是，我可以编辑 CSS 样式表。我有一个“滑动门”样式的按钮，我想将其替换为页面上的默认输入按钮，但我不知道如何仅使用 CSS 来做到这一点。

这是按钮的 HTML：

<div>
    <input type="button" style="margin: 10px 0pt 0pt; width: 60px; height: 25px; font-size: 11px;" name="search_btn" value="Search" onclick="DoSearchSalesExpanded(searchform);"/>
</div>

这是我拥有的使用“滑动门”方法的现有按钮的 CSS：

.clear { 
    /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}
a.button_oval {
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_a.gif') no-repeat scroll top right;
    color: #222;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}
a.button_oval span {
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
} 
a.button_oval:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}
a.button_oval:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}
4

3 回答 3

1

您需要两个元素来进行嵌套背景连接（也称为滑动门）：一个外部（背景）和一个内部（前景，包含背景图像的末端）。如果你只有一个独立的 <input> 你就卡住了。

如果您能找到一种方法来选择您提到的 <div> ，则可以将其用作外部元素，将按钮（删除其自然背景颜色）用作内部元素。但是，您必须确保外部 div 与内部 <input> 的宽度/高度相同，也许可以通过将其向左浮动（以激活浮动附带的“缩小以适应”行为）。您还需要考虑按钮的上边距及其上的任何填充。

#something div {
    float: left;
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_a.gif') no-repeat 0 10px;
}
#something div input {
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_span.gif') no-repeat;
    border: none;
    padding: 0;
}

但是，由于所讨论的按钮在页面上具有固定像素大小，因此您根本不需要使用嵌套背景。您可以只为按钮制作一个正确尺寸的背景。

于 2009-03-24T20:52:08.297 回答
1

如果您能够使用按钮元素而不是输入元素。以下文章非常有用。

您仍然可以像输入一样使用类型提交和发布

但是，如果您依赖使用此按钮作为提交，请注意在使用 IE 时。它还将提交按钮的内容，这将为 .net Web 应用程序提供安全例外。

*编辑，发现与原始链接不同的链接不再有效

于 2011-06-07T05:09:41.850 回答
0

您唯一的其他选择是使用 javascript 动态插入...我的按钮文本...通常用于滑动门按钮的标签。但是，不建议这样做，因为它不适用于禁用 JS。

于 2010-06-21T10:16:37.317 回答