CSS text-indent: An Excellent Trick To Style Your HTML Form
Spread it!
You probably know what the text-indent property does in CSS. It's a common CSS property allowing webmasters to indent paragraphs and hide text for image-based links. Text-indent does this great; however, it doesn't just hide and indent text. It does more.
What's text-indent?
Text-indent specifies the horizontal indent from the left side of the parent block element for the first line in the block. The indent is only applied at the beginning of the block but not after any intervening line-breaking elements. Keep in mind that this property allows negative values, and if used this way, the first line will be indented to the left.
The text-indent property is supported in all major browsers. However, Internet Explorer fails to support the inherit value for the text-indent (Yes, even IE8).
Hiding text using text-indent
Let's say you have a logo and you want to display it in a link, so people can click on it. Only including the image of the logo has some drawbacks as far as SEO is concerned. Here's a solution to handle this:
<style type="text/css">
h1 a {
text-decoration: none;
position: absolute; /* Depending on your placement */
width: 260px;
height: 100px;
bottom: 0px; /* Depending on your placement */
background: url(images/aext-logo.png) no-repeat left top;
text-indent: -99999px;
}
</style>
<h1><a href="http://aext.net">AEXT.NET</a></h1>
With this, search engines will still recognize the text, but users will only see the logo because the text is indented to the left (99999px). See:
This is not a new CSS technique and probably one of the most widely used techniques today. The way it works is very simple: the text in any block (not just links; such block-level elements, table cells, and inline blocks) will be pushed so far to the left (off screen) that its background image will remain the only thing the user see. The value of the text-indent property tells the browser at what point, relatively, the text should start.
An awesome trick using text-indent & forms
People mostly use text-indent to hide text like our example above. They often use the negative value for text-indent but forget to make use of its original intent: inset indentation. Here I'll show you how to make a beautiful text field using text-indent.
Let's use a simple search form as an example:
<form action="http://aext.net" id="search" method="get"> <fieldset> <input type="text" id="searchtxt" name="s" value=""> </fieldset> </form>
Before the CSS, your text field looks something like this:
First, let's style it up and make it look a bit better with this CSS:
<style type="text/css">
fieldset {
border: none;
}
label
{
font-family: Helvetica,arial,sans-serif;
font-size: 15px;
font-weight: bold;
color: #9F0000;
}
input[type="text"]
{
border:1px solid #CCCCCC;
color:#516064;
font-family: Helvetica,arial,sans-serif;
font-size:16px;
margin-bottom:20px;
padding:8px;
width:400px;
}
</style>
<form action="http://aext.net" id="search" method="get">
<fieldset>
<label for="searchtxt">Search: </label>
<input type="text" id="searchtxt" name="s" value=""/>
</fieldset>
</form>
The result?
The label is now above the input field but it'd look amazing if we wrapped it with the input element and made the entered text follow after the label. We'd usually do it with the padding value, but today we'll do it with text-indent.
Alright, now for the trick! Here it is:
<style type="text/css">
fieldset {
border: none;
/* trick */
position: relative;
}
label
{
font-family: Helvetica,arial,sans-serif;
font-size: 15px;
font-weight: bold;
color: #9F0000;
/* trick */
left:10px;
top:9px;
position:absolute;
}
input[type="text"]
{
border:1px solid #CCCCCC;
display: block;
color:#516064;
font-family: Helvetica,arial,sans-serif;
font-size:16px;
margin-bottom:20px;
padding:8px;
width:400px;
/* trick */
text-indent:75px;
}
</style>
<form action="http://aext.net" id="search" method="get">
<fieldset>
<label for="searchtxt">Search: </label>
<!-- Remember to set mexlength for the input -->
<input type="text" id="searchtxt" name="s" value=""
maxlength="35" />
</fieldset>
</form>
What you get after the trick:
Although it looks great & works perfectly, you need to set the maxlength value for the input element to avoid text moving to left and getting in the way of the label. Here's a sample of how you could use this technique in the "real world":
Choose an username for your portfolio:
Updated: It will display incorrectly in IE6 & IE7 because the css in this tutorial conflicts with the css in this WordPress theme. It works well in its own page. There is a bug in IE with the input element by using text-indent that I forgot. That's "Peekaboo Bug". It will make the text inside the text input display weird by floating to the left, but when refreshed, the bug is gone. Alright, edit something in your css text field:
<style type="text/css">
input[type="text"]
{
display:block;
line-height: 100%;
}
</style>
So, what do you think? If you find any issues in this tutorial, please drop a line in comment section! Hope you like it and be sure to spread the love by sharing this article with the buttons below. Thanks!
68 User Comments
Trackbacks/Pingbacks
-
-
04. Feb, 2010
[...] CSS text-indent: An Excellent Trick To Style Your HTML Form | AEXT.NETaext.net [...]
-
-
04. Feb, 2010
yeah! this story has entered the popular today section on popurls.com…
-
-
04. Feb, 2010
[...] CSS text-indent: An Excellent Trick To Style Your HTML Form | AEXT.NET [...]
-
-
04. Feb, 2010
[...] CSS text-indent: An Excellent Trick To Style Your HTML Form [...]
-
-
04. Feb, 2010
[...] CSS text-indent: An Excellent Trick To Style Your HTML Form Via / CSS Globe [...]
-
-
04. Feb, 2010
[...] Shared CSS text-indent: An Excellent Trick To Style Your HTML Form | AEXT.NET. [...]
-
-
05. Feb, 2010
[...] via CSS text-indent: An Excellent Trick To Style Your HTML Form | AEXT.NET. [...]
-
-
05. Feb, 2010
CSS text-indent: An Excellent Trick To Style Your HTML Form…
A simple but great trick to style your HTML Form input using CSS text-indent property….
-
-
05. Feb, 2010
[...] CSS text-indent: An Excellent Trick To Style Your HTML Form [...]
-
-
05. Feb, 2010
[...] CSS text-indent: An Excellent Trick To Style Your HTML Form [...]
-
-
05. Feb, 2010
[...] CSS text-indent: An Excellent Trick To Style Your HTML Form [...]
-
-
06. Feb, 2010
CSS text-indent: An Excellent Trick To Style Your HTML Form…
A simple but great trick to style your HTML Form input using CSS text-indent property….
-
-
06. Feb, 2010
[...] text-indent: An Excellent Trick To Style Your HTML Form | AEXT.NET http://aext.net/2010/02/css-text-indent-style-your-html-form/ [...]
-
-
07. Feb, 2010
[...] CSS text-indent: An Excellent Trick To Style Your HTML Form | AEXT.NET [...]
-
-
12. Feb, 2010
[...] original here: CSS text-indent: An Excellent Trick To Style Your HTML Form | AEXT.NET Share and [...]
-
-
13. Feb, 2010
[...] original post here: CSS text-indent: An Excellent Trick To Style Your HTML Form | AEXT.NET Share and [...]
-
-
08. Mar, 2010
[...] CSS text-indent: An Excellent Trick To Style Your HTML Form (aext.net). Probablemente sabes lo que la propiedad “text-indent” hace en CSS, como recordatorio mencionaré que es un atributo CSS que sirve para hacer sangrado, especifica la sangría de la primera línea, o márgenes en un bloque de texto, muy útil y novedoso. Pero hace algunas cosas más, todas las comenta en el artículo con su codificación para aplicarlo en los formularios. [...]
Leave a Reply
About AEXT.NET
AEXT is a design magazine that publishes all things web design. Articles here are published by web professionals for web professionals featuring tutorials, collections, and resources.
I am in school for web design as we speak, and just finished learning how to style text. They mention briefly about the -99999px, but the way you explained it made it very easy to understand, and the reason for it. I am going to try using that while styling up some mock sites this week. Cool Tip, Thanks.
Chris´s last blog ..Sites of the Week (10)
I just mentioned the -9999px for introduction only. I’m glad when you like it
I really love this trick. It’s simple. It looks cool and i’m sure it works in all browser. I’ve never thought to use text-indent instead of padding to accomplish this. Thank you !
loved it.
Very useful for url fields where you want the user to fill everything after the “http://” for example.
Great trick with the text-indent, will use it;) Thanks.
Iniwoo´s last blog ..Photography Inspiration: Cutest Pictures of Snoozing Animals
very nice!
冰剑´s last blog ..2010年，blog第一篇更新
thanks for the information. i will use in my projetcs
Nice tricks Lam. B/W some don’t support in IE7 and IE6. You can check this page out in IE6 and IE7
Smashing Share´s last blog ..Firefox Themes – 60 Most Popular Themes You Must See
Ouch, I just thought It’s good in all major because there is nothing restricted here. I should give it a try in IE6 and IE7. If it doesn’t, maybe the problem is the css style on this WordPress layout, not because of its css code. Good catch!
Dear my friend, that’s a bug of IE. The problem is fixed!
Looks Weird in IE 8, 7, 6
anyway nice try..
Thank you guy! Now, the problem is fixed! Please follow the updated code!
Nice trick lam. Love reading your tips. Thanks anyways
Simple and nice trick! Love it!
Lars Hoss´s last blog ..The "Fancy Form Design" book
Useful trick. Thank you for detailed tutorial.
Tomas´s last blog ..25 Websites With Awesome Mascots
good trick
thanks mate
Yes. It’s a nice way to style the form elements.
btw, did you miss the <label> tag in the HTML markup?
Veera´s last blog ..Switching to Thesis wordpress theme
Hey, thanks Veera. Thanks for this catch. I forgot to put it in the first example. But the final result is correct in HTML markup, right?
Very nice and useful trick. Thanks for sharing this!
Was just looking for this solutions. Thanks!
I’m using Chrome and clicking on the example “Search” box makes my caret go to the left side of the “Search” text.
When I start to type, then the caret position goes right of the “Search” text and it works. It seems like Chrome does not set text-indent until there’s some text to set it to.
I noticed that too. That’s a bug in Chrome but it’ll be fixed soon. At least it works correctly when you start typing. That’s the most important thing.
PS: I love Chrome
Some of the latter examples don’t work correctly in Google Chrome. Also this form im typing in now is completely screwed up. Id fix it if I were you
Chris, I’m on Chrome and everything works properly (minus what was mentioned previously in the comments). What OS are you using? Can you paste your “about:version” info here?
Seems like padding would be a better choice for this technique. In your examples above if you type all capital W’s the overflow pushes the text over your label. You also have the chrome issue mentioned above which also happens in Safari.
There’s a reason that we should not using the padding: we have to calculate very carefully the width of the text input. Unlike margin, the actual width of the element will be changed when using padding. However, that’s just a trick.
My god, this is great! thanks a lot
Very nice, I was working last night on styling my ads I believe this will help a lot!
Thanks a lot for sharing
Hesham @ FamousBloggers´s last blog ..Top 5 Most Popular Social Bookmarking Websites using Drupal CMS and Drigg Module
This is detailed tutorial,thank you.
rocky´s last blog ..beetle die
I’m so lazy when it comes to forms, they’re probably the last thing I ever style.
I like this article. I use the text replace for the logos on all of my websites. It’s definitely a good piece of code to know. For the form’s though, I hadn’t thought of that – nice tip!
Font-size will not always be the 12px you specify.
I suggest you use EMs for your text-indent instead of PX. Hopefully that should work better with different computer settings for text size.
Is every single css property a “trick” for you? I can imagine the title of the next article: ‘font-weight: An Extraordinary Trick To Style Your Text’
trick [trik] ,
–noun
*a clever or ingenious device or expedient; adroit technique: the tricks of the trade.
*a behavioral peculiarity; trait; habit; mannerism
Source
And.. where is the connection between the text-intend and forms as your heading proclaimed it? You use positioning for placing text in the input, really I must ban you for gutter press headers style.
I really don’t understand what you are looking for in this form? What’s a form do you think? or it’s just a tag name
<form>?A neat little trick.
I have used the text indent on logos for my more recent sites. Cant believe I didn’t think to use it earlier!
As for using it for the form. Not something I would have done, so will keep it in mind going forward!!
Good job!
An old trick which is pretty cool. However, it’s not clean. It’s not supposed to be styled that way. When CSS3 and HTML5 becomes standard, we’ll prolly not need as much hacks anymore.
That day would be so far
I used -999em. Slightly less characters, but does the same job.
Paul Randall´s last blog ..Why Comment?
Thanks for a very handy tip!
I really like the last input field, but HTML looks messy: h4 instead of label and outside the form… but it does the trick.
Nice little trick. Thanx for sharing it. I’ll definitely use it in upcoming projects.
I HATE HTML, but since I have to work with it, this is a pretty sweet tutorial!! I’d rather do everything in Photoshop, but ya know…..
Thanks for posting!
alyssa´s last blog ..Free Swagbucks Code!
Good tutorial, shall find a nice home for the technique!
Nice trick for CSS to hide text and styling the HTML form.
Rahul – Web Guru´s last blog ..Global fight against Polio
hidding images by text-indent is not good method.. turn off images in your browser..
where is the text?
I think you meant “hiding text” right?
The point is not for it to display without images, but without CSS and more importantly: for search engines.
Thanks for your comment!
Hi;
It is interesting but, to achieve the same effect, I would suggest the following code:
fieldset { border: none; position: relative; }
label{ font-size: 12px; font-weight: bold; color: #333; left:10px; top:8px; position:absolute; }
input{ border-color:#F9F9F9; border-style:solid; border-width:1px 1px 1px 145px; display: block; color:#516064; font-size:16px; margin-bottom:20px; padding:8px; width:400px; }
Type your Search:
Regards!
Oh,
the system has eliminated the HTML tags;
but no matter, the CSS code is the important.
I use another method. Put the label and the input in a div with a border.
The input has no border. Same effect and with no use of positioning absolute. It will always work.
Like the tip for the form, looks really nice this way. But I don’t really understand why it is a good idea to hide text in an anchor tag which contains an image.
SEO-wise I reckon it’s far more subtle (and probably more in line with best-practice guidelines) to simply use an alt-tag and a title-tag. You’re able to put in your keywords there as well and this way you’ll make use of css and tags the way your supposed to.
Hiding text sounds like using the same background-colour as the font-colour.