CODEWITHSUNDEEP
htmlcssrounded-corners
ScottR
ScottR

Reputation: 3120

Rounded input buttons, absolute positioning, liquid width

I realize there are lots of rounded buttons questions, but my needs are fairly specific, and this hasn't been answered elsewhere.

Here's my requirements:

The absolute positioning + client side only makes most rounded corner techniques unusable in my opinion.

Images or no images does not matter (either way is fine). JavaScript is allowed.

EDIT: Changed question to reflect actual problem: the one HTML element I thought I needed wasn't really the requirement.

Upvotes: 2

Views: 1007

Answers (3)

ScottR
ScottR

Reputation: 3120

I ended up using multiple backgrounds for the buttons.

CSS3 multiple backgrounds for browsers that could handle that, and in IE I used the DXTransform filter to add a second image (see here). The actual technique used was a pretty standard sliding door style setup, with some changes to account for the fact that you couldn't position the second image in IE other than at the top left.

For FF 3.5 and lower I used border-radius, since multiple backgrounds only came in 3.6.

Hover/active images worked fine, and it's all in CSS, which was a bonus.

Upvotes: 1

ScottS
ScottS

Reputation: 72261

Since javascript is allowed (based on one of your comments), I don't see how it would be a big performance hit to:

  1. wrap the input elements with div
  2. take the positioning properties of the input and copy them to the div wrapper
  3. remove the positioning off the input using an inline position: static
  4. add other elements or styles to get your rounded corners. Being fixed height, then for everything other than IE7, some css like this should work (assumes fixed height of 20px, rounded end images that are 10px wide by 20px high):

Css:

div.inputWrap:before, 
div.inputWrap:after {content: ' '; display: inline-block; height: 20px; width: 10px; background: url(/yourRoundedLeftEndImg.png) top left no-repeat;}

div.inputWrap:after {background: url(yourRoundedRightEndImg.png);}

Assuming your javascript gives you this html:

<div class="inputWrap"><input /></div>

You will need to style the input to get rid of borders, and such (I also found that my test in Firefox required me to set vertical-align: top, but not sure if that is necessary. For IE6-7, you would actually have to add extra div's before and after the input since they do not recognize the :before and :after pseudo-classes.

Upvotes: 0

Carvellis
Carvellis

Reputation: 4042

It's not possible for IE. That's why you can't find it anywhere else. The only thing you could do is use a static background image, but that will stretch for different widths.

Upvotes: 3

Related Questions