css - 使用 "Sliding Doors"设计输入按钮的样式

Question

我有一个网页正在使用我无法更改的第三方 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 */
} 

Answer 1

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

如果您能找到一种方法来选择您提到的

，则可以将其用作外部元素，将按钮(移除其自然背景色)用作内部元素。不过，您必须确保外部 div 与内部 <input> 具有相同的宽度/高度，也许可以通过将其向左浮动(以激活 float 带来的“收缩以适合”行为)。您还需要考虑按钮的上边距及其上的任何填充。

#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;
}

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

关于css - 使用 "Sliding Doors"设计输入按钮的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/678925/