滑动门"使用&QUOT造型输入按钮; [英] Styling an Input Button using "Sliding Doors"
问题描述
我有一个使用第三方的HTML,我不能改变的网页。不过,我可以编辑CSS样式表。我有我想交换页面上的默认输入按钮滑门式的按钮,但我想不出如何做到这一点只用CSS。
下面是按钮的HTML
< DIV>
< INPUT TYPE =button风格=保证金:10px的0pt 0pt;宽度:60像素,高度:25px的;字体大小:11像素; NAME =search_btn值=搜索的onclick =DoSearchSalesExpanded(searchform);/>
< / DIV>
这是我有一个现有的按钮的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屋!