CODEWITHSUNDEEP
jquerytextboxfadeintextinputglow
Sten Van den Bergh
Sten Van den Bergh

Reputation: 1655

How can I put a Twitter-like fade-in glow around an HTML text input field?

I know a glow around input fields is standard, but Twitter manages to fade it in smoothly. I've been looking around but can't seem to find a solid way to achieve this. How is this done?

Upvotes: 4

Views: 1693

Answers (1)

Moin Zaman
Moin Zaman

Reputation: 25455

Here's how twitter does it:

HTML:

  <p class="search-holder" style="opacity: 0.6;">
    <label for="searchform_q">Search for a keyword or phrase…</label>
    <input type="text" tabindex="8" size="30" name="q" id="searchform_q" class="round-left" accesskey="/"><input type="submit" value="Search" tabindex="9" name="commit" id="searchform_submit" class="submit round-right">
  </p>

jQuery:

  $('.search-holder').mouseenter(function(){
        $(this).animate({opacity:1});
  }).mouseleave(function(){
        $(this).animate({opacity:0.6});
  });

Upvotes: 6

Related Questions