Google URL Shortener Highlight

Question

How does Google url shortener do the highlighting for the shortened URL? When you click on the button shorten, the shortened url appears on the right and is automatically highlighted. This is through js no? Thanks!

Answer 1

Yes, it seems to be done by some portion of Javascript.

Here are a few links that could interest you, about that :

• how to auto select an input field and the text in it on page load
• Programmatically selecting partial text in an input field
• Selecting Part of String inside an Input Box with jQuery

Edit after the comment : oh, the question, now is :

how to highlight certain labels or how to make textarea and input fields look like labels.

Well, you'll have to use a bit of CSS, to :

• Remove the border arround the <input>,
• maybe, remove its background
• make sure the uses the same font as the rest of the page.

I'm guessing that, with some HTML code that would look like this :

hello, <input type="text" value="world" id="test" /> !

A portion of CSS like this one might help :

* {
    font-family: arial, sans-serif;
    font-size: 1em;
    background-color: #FAA;
}

#test {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    width: 50px;
}

(Yeah, the color is not that great -- but it helps make sure there is no border/background visible)