滑动门＆QUOT;使用＆QUOT造型输入按钮; [英] Styling an Input Button using "Sliding Doors"

问题描述

我有一个使用第三方的HTML，我不能改变的网页。不过，我可以编辑CSS样式表。我有我想交换页面上的默认输入按钮滑门式的按钮，但我想不出如何做到这一点只用CSS。

下面是按钮的HTML

 ＆LT; D​​IV＆GT;
    ＆LT; INPUT TYPE =button风格=保证金：10px的0pt 0pt;宽度：60像素，高度：25px的;字体大小：11像素; NAME =search_btn值=搜索的onclick =DoSearchSalesExpanded（searchform）;/＆GT;
＆LT; / DIV＆GT;
 

这是我有一个现有的按钮的CSS一个使用滑动门的方法：

  .clear {
    / *通用容器（即DIV）浮动按钮* /
    溢出：隐藏;
    宽度：100％;
}
a.button_oval {
    背景：透明的url（'http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_a.gif'）不重复滚动右上角;
    颜色：＃222;
    显示：块;
    浮动：左;
    字体：12px的正常宋体，无衬线;
    family：宋体;
    保证金右：6像素;
    填充右：18像素; / *推拉门的填充* /
    文字修饰：无;
}
a.button_oval跨度{
    背景：透明的url（'http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_span.gif'）不重复;
    显示：块;
    行高：14px的;
    填充：5像素0 5像素18像素;
}
a.button_oval：积极{
    背景位置：右下角;
    颜色：＃000;
    概述：无; / *在Firefox隐藏虚线轮廓* /
}
a.button_oval：主动跨度{
    背景位置：左下方;
    填充：6像素0 4PX 18像素; / *推文向下1px的* /
}
 

解决方案

如果你能使用的按钮的元素代替的输入的元素。
下面的文章是非常有用的。

• http://jedisthlm.com/2008/03/27/flexible -css-按钮/


• 的http://robertnyman.com/2008/03/13/styling-buttons-and-achieving-sliding-doors-with-them/

您仍然可以使用类型提交和发布等的输入确实

不过，如果你是靠使用此按钮作为提交，只是要小心使用IE时。它会提交按钮也将提供一个安全例外的.NET Web应用程序的内容。

*编辑，发现了一个不同的链接作为原始不再适用

I have a webpage that is using third-party HTML that I cannot change. I can however edit the CSS style sheet. I have a "sliding-doors" style button that I want to swap for the default input button on the page, but I cannot figure how to do so using only CSS.

Here is the HTML of the button:

<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>

And here is the CSS of an existing button that I have which uses the "sliding-doors" method:

.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 */
} 

解决方案

If you are able to use the button element instead of the input element. The following articles are quite useful.

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

You can still use type submit and post like an input does

However, if you are relying on using this button as a submit, just beware that when using IE. it will submit the contents of the button also which will give a security exception for .net web apps.

*Edit, found a different link as original no longer works

这篇关于滑动门＆QUOT;使用＆QUOT造型输入按钮;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！