Hi,
Can anyone give me an example of rounded input text using image?
Regards,
Jeff
| SitePoint Sponsor |
Hi,
Can anyone give me an example of rounded input text using image?
Regards,
Jeff
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'.
It is a bit confusing. Do you mean something like this: http://imaginekitty.com/cssExamples/roundInput.html
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
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?
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.
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?Originally Posted by jep_657
Im using IE... if im not wrong :before and :after is not supported by IE.
: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.
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.
input_screenshot.png
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">
So, hopefully you can help me with :before and :after in css.
OK, no extra markup here: http://imaginekitty.com/cssExamples/roundinput.2.html... 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.
I couldn't view the attachment as it seems to be "Pending Approval" so I just went with my original purposely ugly images.
Anyway, im using IE9...Is :before and :after still working in IE9?
You don't need it.
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.
Duh, silly me. I didn't notice that you have the left rounded corner on the label. Nice work.
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.
Okay, thanks imaginekitty...i will give it a try...
Regards,
Jeff
Danke. Use what's there unless you can't and you usually can.Duh, silly me. I didn't notice that you have the left rounded corner on the label. Nice work.
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
Hi imaginekitty,
I use your http://imaginekitty.com/cssExamples/roundinput.2.html link as an example.
You are using label. If you dont mind, can help me convert that using table, tr, td?
In HTML:
<form method="post">
<table width="100%" align="center" border="1">
<tr align="center">
<td>Name</td>
<td>
<input type="Text" class="class_name" name="input_name">
</td>
</tr>
<tr align="center">
<td>Last Name</td>
<td>
<input type="Text" class="class_name" name="input_name01">
</td>
</tr>
</table>
</form>
In CSS:
???
Thanks...
You'd need to position it absolutely, and give the input position relative and some left and right padding for locating the generated content.
Tables are not needed there, and not the right element to be laying out something like this. A table is only meant for tabular data, and it also involves more markup than you need. The <label> element is an essential form element, so it's not a good idea to leave it out, and it is just as good a hook for styling at a table cell, too. It would be harder to use the above approach with table cells.
So, basically using tables are not applicable for the example?
Hi ralph,
Did you try this code?
<!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 -";
background-color:yellow;
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<p>test 1</p>
<p>test 2</p>
</body>
</html>
I think it is not working in IE9.Can you please give me the proper code for
CSS on how to use the proper positioning between :before and <p>?
Thanks
No, like I said, you need to position the before and after content absolutly and give the element itself position: relative.
Posting Permissions
Reply With Quote
Bookmarks