Rounded input text with image

HTML & CSS
1

Hi,

Can anyone give me an example of rounded input text using image?

Regards,
Jeff

2

Could you say a bit more about what you mean? It’s not clear (to me at least) what you mean by ‘rounded input text’.

3

It is a bit confusing. Do you mean something like this: http://imaginekitty.com/cssExamples/roundInput.html

4

Hi,

Your example is correct. But, is it possible if we dont use full image?
just a normal input…but just play with the css only?

Example:
In html:

<input class=“class_name” name=“input_name”>

In CSS:

.class_name
{
–do rounded corners css with image
}

I know that in CSS3 there is a border-radius solution.
But Im not using CSS3. And this is my only choice. Play with CSS.
I will not use (div + input + div) in HTML. Just pure CSS.

Is there any way?

Regards,
JEff

5

It’s not really clear what you are asking here. The example linked above just uses CSS with a background image. Isn’t that what you want?

6

Yes, it is what i want but it is not a full image…the above example has the
fixed width of the input. Basically, i want to put a curve in left side and
curve in the right side. And CSS3 only support that. Since, im not using CSS3, is it possible
to do that playing in CSS only.

7

Yes, easy with CSS and background images. One way is to place the background images as generated content on the input via :before and :after. Could you provide a screen shot of the look you want?

8

Im using IE… if im not wrong :before and :after is not supported by IE.

9

:before and :after is not required if you use the sliding doors technique which may require some additional markup. Maybe not.

That would be nice.

10

Only in obsolete versions of IE (7 and under).

Yes, would normally require more markup, so I suggested :before/:after since the OP indicated a preference for no extra markup. But ultimately one can’t be too picky. :slight_smile:

11

I attached the screenshot.
In CSS:
.INPUT_CLASS
{
background-color: #ffffff;
color: #000000;
font-size: 8pt;
height: 18px;
border:1px solid #800000;
text-align: left;
}

In HTML:
<input class=“INPUT_CLASS” name=“input_name”>

12

So, hopefully you can help me with :before and :after in css.

13

OK, no extra markup here: http://imaginekitty.com/cssExamples/roundinput.2.html :slight_smile:

I couldn’t view the attachment as it seems to be “Pending Approval” so I just went with my original purposely ugly images.

14

Anyway, im using IE9…Is :before and :after still working in IE9?

15

You don’t need it.

16

Your attached image showed up but it doesn’t show what we need. We need what you want it to look like not what it looks like now. You should be able to work with the technique I showed though. Give it a try.

17

Duh, silly me. I didn’t notice that you have the left rounded corner on the label. Nice work. :slight_smile:

Yes, it does work, but as imaginekitty is saying, you can use one bg image without extra markup.

Your screen shot does not include rounded sides, which was part of the point of asking for a screen shot.

18

Okay, thanks imaginekitty…i will give it a try…

Regards,
Jeff

19

Danke. Use what’s there unless you can’t and you usually can. :wink:

20

Hi,
I tried :before.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<style type=“text/css”>
p:before
{
content:“Read this -”;
}
</style>
</head>

<body>
<p>My name is Donald</p>
<p>I live in Ducksburg</p>

</body>
</html>

It is not working in IE9. Why?

Jeff