文章/答案/技术大牛

发布

社区首页 >问答首页 >使用“滑动门”设置输入按钮的样式

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

Stack Overflow用户

提问于 2009-03-24 19:37:03

回答 3查看 5.4K关注 0票数 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 */
}

css

forms

input

button

回答 3

Stack Overflow用户

发布于 2009-03-24 20:52:08

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

如果你能找到一种方法来选择你提到的，你可以使用它作为外部元素，与按钮(删除其自然背景颜色)作为内部元素。您必须确保外部div与内部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;
}

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

票数 1

Stack Overflow用户

发布于 2011-06-07 13:09:42

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

http://jedisthlm.com/2008/03/27/flexible-css-buttons/
http://robertnyman.com/2008/03/13/styling-buttons-and-achieving-sliding-doors-with-them/

您仍然可以像输入一样使用类型submit和post

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

*编辑，找到不同的链接，因为原始链接不再起作用

票数 1

Stack Overflow用户

发布于 2010-06-21 18:16:37

您唯一的其他选择是使用javascript动态插入...my按钮文本...通常用于推拉门按钮的标记。但是，不建议这样做，因为在禁用JS的情况下，它将不起作用。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/678925

复制

相似问题

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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