Geek Answers Handbook

Styling the enter button with "sliding doors"

I have a webpage that uses third-party HTML that I cannot change. However, I can edit the CSS stylesheet. I have a “sliding door” style button that I want to change to the default input button on the page, but I cannot figure out how to do this using only CSS.

Here is the HTML code for 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 the existing button that I have that uses the "sliding door" method:

 .clear { /* generic container (ie 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 */ }
+1
source share
3 answers

You need two elements for a nested background connection (aka sliding doors): external (background) and internal (foreground containing the final element of the background image). If you only have a standalone <input>, you're stuck.

If you can find a way to select the <div, you mentioned, you can use this as an external element, while the button (with the natural color background removed) as the internal one. You need to make sure that the outer div is the same width / height as the inner <input>, although it may be floating to the left (to activate the "compressible behavior" that comes with the floats). You will also need to consider the top margin on the button and any addition to it.

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

However, since this button has a fixed pixel size on the page, you do not need to use nested backgrounds at all. You can simply make one background with the correct dimers for the button.

+1
source

If you can use a button element instead of an input element. The following articles are very helpful.

You can still use the type submit and post as input,

However, if you rely on using this button as a submit, just be careful when using IE. it will also send the contents of a button that will provide a security exception for .net web applications.

* Modify, find another link, as the original no longer works

+1
source

The only other option is to use javascript to dynamically insert ... text tags ... tags that are commonly used for sliding door buttons. However, this is not recommended as it will not work with JS disabled.

0
source

More articles:


All Articles