使用“滑动门”设置输入按钮的样式答案

【问题标题】：Styling an Input Button using "Sliding Doors"使用“滑动门”设置输入按钮的样式
【发布时间】：2010-10-15 07:15:25
【问题描述】：

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

【问题讨论】：

标签： css forms input button

【解决方案1】：

如果您能够使用 button 元素而不是 input 元素。以下文章非常有用。

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

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

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

【讨论】：

谢谢，使用不同的链接作为参考。也记下了IE和asp.net可能遇到的一些问题

【解决方案2】：

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

【讨论】：

你应该用例子告诉答案。它会更好地解释你的答案，也会帮助其他人。

【解决方案3】：

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

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

，您可以将其用作外部元素，将按钮（移除其自然背景颜色）用作内部元素。但是，您必须确保外部 div 与内部的宽度/高度相同，也许可以通过将其向左浮动（以激活浮动附带的“缩小以适应”行为）。您还需要考虑按钮的上边距及其上的任何填充。

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

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

【讨论】：