Need help with "How to get Safari like halo border effect on text boxes"

**LtJerryMouse** · 11-13-2009, 01:08 AM

Hello All -

I need to implement a feature where text boxes display "halo" like border shadow when they get focus. This is similar to how Apple's Safari's works on text fields. I am attaching the screen shots of the expected behavior (text box with and without focus). The screen shots are from the search text box on web site http://www.lynda.com

Many thanks in advance.

**jscheuer1** · 11-13-2009, 03:05 AM

That (lynda.com search box) doesn't render well in Opera, perhaps others. However, it appears to use css, javascript and what is know as a sprite:

http://www.lynda.com/images/safari_search_tag.png

a background image that can be positioned within smaller division elements (which then, by virtue of their size, crop it) surrounding (in this case the text input) to achieve the desired result. Some javascript is likely also involved to get the different looks for the onfocus and onblur events of the input element, though some browsers support these as pseudo classes via css (:focus, :blur).

However, due to the fact that browsers and OS's often take control of the look and feel of the text input (and many other form elements), and will probably continue to do so in varying ways for quite some time, though this idea may seem attractive, it can cause problems for some users, making the input inaccessible and/or challenging to read. My advice is, if you want that type of input, install Safari.

**LtJerryMouse** · 11-13-2009, 03:55 AM

thanks for the reply John. Actually I wanted to implement it for my web site, hence my question as the web site visitors would have a variety of web browsers and I wanted the text boxes to be a little more intuitive. What I was hoping for if someone had a working example within dynamicdrive.com or some other site for code examples.

thanks.

Jerry.

**jscheuer1** · 11-13-2009, 05:47 AM

No, I'm not aware of anything like that here on DD, and searching via Google turns up nothing useful, at least not with the search terms I could think of.

This does intrigue me though, so I may try my hand at it. It really doesn't seem to be all that different than rounded corners using css, javascript and images, which is actually fairly common.

Added Later:

I did come across this though:

http://egorkhmelev.com/pretty-search/

**LtJerryMouse** · 11-13-2009, 04:07 PM

Thanks for the help John. It is exactly what I was looking for, if I can get it to work

. I went to the above url and saved the html page locally on my d: drive in the "Google Pretty Search Text Box" dir. I also have a sub dir "prettySearchFiles" that contains the following files

_classPrettySearch.js
_jquery-1.js
d.gif
pretty-search.css
search-spinner.gif

The mail html page has the following code and reference files:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><input type="search" /></title>
<link rel="stylesheet" href="/prettySearchFiles/pretty-search.css" type="text/css">
<script src="/prettySearchFiles/_jquery-1.js" type="text/javascript" charset="utf-8"></script>
<script src="/prettySearchFiles/_classPrettySearch.js" type="text/javascript" charset="utf-8"></script>
</head><body>
<form method="get" action="/">
<div style="width: 129px;" class="pretty-search"><div class="ps-left"></div><div class="ps-container"><div class="ps-right"></div><span
style="display: inline;" class="ps-placeholder">Google</span>
<input style="outline-width: 0pt;" class="ps-input" autocomplete="off" name="query" type="text">
<span class="ps-spinner"><img src="/prettySearchFiles/search-spinner.gif" alt="*" width="11" height="11"></span>
<span style="display: none;" class="ps-clear"><img src="/prettySearchFiles/d.gif" alt="x" width="11" height="11"></span></div></div>
</form>

</body></html>

However, I am not still getting the expected results. It could be because the file "pretty-search.css" have reference to some background image files as follows:

background: url(../i/search-input.png) or progid

XImageTransform.Microsoft.AlphaImageLoader(src='./i/search-input.png and I am not sure where to get these from.

BTW, what does have "./" or "../" mean in the path? for example if I have a url as http://www.dynamicdrive.com/forums/, then what would url would be for url(../i/somefilename.css) mean? I am newbie to programing, hence I ask the question.

And one last question, I have noticed that when testing JSctipt or ActiveX code, IE comes up with the security bar at the top, is there a way to avoid this while testing own code locally?

I have attached a file with screen shots of both items I have listed above. Again, many thanks for all your help on this.

**jscheuer1** · 11-13-2009, 04:37 PM

Once you approve active x in a tab, it will no longer prompt you for that. I always keep an 'approved' tab open for local testing. This of course is not an issue for live pages.

I was having a look at that pretty-search code, and although I was able to duplicate it locally, it seemed unwieldy - overly complex. So I went back to the page you originally mentioned. The code there was even more complex, but not for this effect in and of itself. In addition though it used the code heavy prototype script library and has unnecessary styles and unnecessary style workarounds, the later of which actually made the effect less than optimal in some browsers.

So I got rid of all that junk, converted to the lighter weight jQuery, and am pretty happy with the result. I'll attach a .zip of it:

Attachment 2991

**LtJerryMouse** · 11-13-2009, 07:31 PM

thanks John for all your help. The code is indeed much simpler and works like a charm. I will now try to incorporate the "x" (clear out) functionality in the text box, as was on the http://egorkhmelev.com/pretty-search/ page, and if I can't get it to work, I will again reach out to this forum. This is an incredibly helpful forum for people like us who are learning the development skills.

thanks again.

Jerry.

**jscheuer1** · 11-14-2009, 10:39 AM

I've added the xClear option. In this new version, just add the optional class xClear to the text input and it will have that behavior. I've also added another optional class, exemptText, for any text inputs that you might not want to have receive the 'Safari' treatment. Another change, if a text input has a hard coded value, it will automatically become its default value, no more need for the non-standard attribute 'defaultvalue'.

I also optimized the images, here's the new archive:

Attachment 2994

**jscheuer1** · 11-14-2009, 06:29 PM

The previous update (safari_text_2.zip) and the original have an issue. They only work well on a white background. So, I've updated again, using a semi-transparent .png image. This caused problems in IE 6 and less, so another supplemental stylesheet was made for those browsers, and the approach in the javascript had to be changed slightly. Now you have to set the background-color to match the background-color of that region of your page in the beginning of main ltext.css file:

Code:

.text-container, .text-left, .text-right {
 height: 25px;
 margin-left: -3px;
 background: white url(safari_text_tag_o.png) no-repeat;
}

Without this, there will be bleed through of the sprite in undesirable ways, but at least it will now blend with any background color. If more than one background color must be accommodated on a given page, container divisions may be made around the input(s) and given a class to control the background color of the nested elements. If you need this and don't know how exactly that would work, let me know.

I was also able to identify and eliminate a few more unnecessary styles. I tested in IE 8 and found that it needed no supplemental styles, so adjusted the IE conditional for ltext_ie.css accordingly.

Here's the latest effort:

Attachment 2996

**LtJerryMouse** · 11-16-2009, 04:48 AM

Many thanks for all your help John. I am really very grateful for all your help on this.

Thanks again.

Jerry.

Thread: Need help with "How to get Safari like halo border effect on text boxes"

Thread Tools

Search Thread

Need help with "How to get Safari like halo border effect on text boxes"

Bookmarks

Bookmarks

Posting Permissions