Styling inputs
Although there is no easy way to style input elements in a graceful and managable way, I’m hoping with the following JavaScript function we can ease this process. I know some of you are already thinking - ick, JavaScript overlapping with my styles? Well, I figure at the least, users who don’t have JavaScript will experience many other fall backs than just losing the styling of their input elements. And even that being said, only the IE users will actually be seeing this drawback.
The problem when styling input’s
Addressing the problem is fairly obivous. In HTML, there are several tag names that differentiate from each other and are easy to style uniquely from each other. However input elements can vary from a text box, radio button, and checkbox…which doesn’t make for easily styling. If we wanted to style input, we’d have to style all three types! Yuck.
Styling with Attribute Selectors
If all browsers supported attribute selectors, we could easily do the following:
styling inputs with attribute selectors
input[type='text'] { font:bold 0.8em 'courier new',courier,monospace; }
input[type='radio'] { margin:0 20px; }
input[type='checkbox'] { border:2px solid red; }Appending className’s to our input’s
Since not all browsers support attribute selectors, we can simply use className’s instead. Although clever and smart, it can get tedious real fast. Thus, the CSS would then become this:
styling inputs with attribute selectors
input.text { font:bold 0.8em 'courier new',courier,monospace; }
input.radio { margin:0 20px; }
input.checkbox { border:2px solid red; }And then we would have to manually add all those className’s to our html documents.
Use JavaScript to automate the process
In a situation of Thanks but no thanks
, we can opt out of manually adding a className to every input element and do it with JavaScript. This function is fairly straight-forward and simple.
Function appendInputTypeClasses
function appendInputTypeClasses() {
if ( !document.getElementsByTagName )
return;
var inputs = document.getElementsByTagName('input');
var inputLen = inputs.length;
for ( i=0;i<inputLen;i++ ) {
if ( inputs[i].getAttribute('type') )
inputs[i].className += ' '+inputs[i].getAttribute('type');
}
}What this function does is basically adds a className of whatever type of input it is. So if it’s type is ‘text’, then it’s className will also have ‘text’! Neat eh?
And just to be safe…
We can keep our attribute selectors as a “progressive enhancement” and our final CSS will look like this:
enhanced CSS for styling inputs
input[type='text'],input.text { font:bold 0.8em 'courier new',courier,monospace; }
input[type='radio'],input.radio { margin:0 20px; }
input[type='checkbox'],input.checkbox { border:2px solid red; }Todays question and book information
The winner of today’s contest will receive a copy of DOM Scripting by Jeremy Keith
Come up with a make-believe Band (Music Group). Name it. Come up with an album title, and list 5 tracks from the album.
Please remember to put your answers encapsulated within a <blockquote> element, and the regular discussion as normal.
December 18th, 2005 at 5:51 pm
Hey! This is a slightly modified version of an old article! I don’t blame you though, I can’t believe you’re doing this every day, and giving a book away everyday to boot! I sure hope you’re getting money from them ads to pay for this, seems like it would get quite expensive.
December 18th, 2005 at 5:59 pm
December 18th, 2005 at 6:22 pm
@Justin: Shhhh! People will find out ;) lol.
I figured since I improved it sometime in the last few months, I would just put up an article.
December 18th, 2005 at 6:34 pm
Eep, my ordered list styling didn’t show up. It should be
- Golden Ring Things
- Fast Enough For Ya
- B-blue
- El Juego
- Broken Dreams
December 18th, 2005 at 6:58 pm
Interesting idea (sounds a little familiar, too Though I’m with Justin, I don’t blame you. After all, you did change some things, and you are giving away free books ).
December 19th, 2005 at 9:05 am
What you think about this solution: Button Replacement ( http://www.revolucao.etc.br/archives/button-replacement/ ) Or you can analise the example ( http://www.revolucao.etc.br/artigos/button/index.htm ).
If someone have an solution for Safari or Knoqueror contact me!!!!
December 19th, 2005 at 9:40 am
Great article. I am really digging this methodology, as well as your awesome function :)
December 20th, 2005 at 1:59 am
My fun:
onblur=”this.style.backgroundColor=’#eee’;”
onfocus=”this.style.backgroundColor=’#efe’;”
December 21st, 2005 at 2:21 am
Band: Above Standards
Album: Delimited
Tracks:
Ex-HTML: A romantic ballad for a long-lost markup language.
Closing Tags: Acoustic song about leaving things open, specifically pictures and images. (of the mind, of course)
Really Simple Song: Five liner repetitive song about the world today.
Screw It, I’m Hacking IE: Rock opera addressing those who give up when tough situations come.
Fisher Price Fonts: Written for the lead guitarists’ Web 2.0-obsessed 6 year old daughter. Verse 2 includes the line: “and her cute 16 point blue writin’
December 21st, 2005 at 1:40 pm
December 22nd, 2005 at 9:21 am
First, I like the JS/CSS technique… but, wouldn’t (I haven’t tested it) it cause a flash of styles?… e.g. unstyled elements in MSIE, then a flash as they become “re-styled”?
As for my band:
December 23rd, 2005 at 4:19 pm
[...] under: Standards — nortypig @ 10:23 am Styling Inputs from Dustin Diaz looks good. [...]
January 1st, 2006 at 11:32 am
January 2nd, 2006 at 1:29 pm
[...] The Year 2005 Feed Icons » Styling Inputs from Dustin Diaz Styling Inputs from Dustin Diaz looks good. This entry was posted [...]
January 13th, 2006 at 12:26 am
[...] ntually went on to becoming a sourcerer using a twig as a wand and saving his village. 6) Styling inputs Come up with a make-believe band. Name it. An [...]
April 18th, 2006 at 6:43 am
Nice solution.
I find, however, that it does not works in InternetExplorer if I put the combined
only works with the single
Any experiences or ideas?
April 18th, 2006 at 7:13 am
You need to separate them into separate rules. Eg:
input.checkbox { }input[type='checkbox'] { }April 30th, 2006 at 3:24 am
I am french, and in a forum (forum.hardware.fr) some people wanted to replace checkbox by an image.
I think, it’s the only way to have a styled checkbox.
That’s why i have made a script, that replace all checkbox by images.
The checkbox is replaced by an image, and the image is like a checkbox.
When you click on the associated label , it works very well :D
My script works into firefox 1.5 (and 1.x), Internet Explorer 6.x, Opera 8.5x
If some people could test the comportement in safari. Thanks
Sorry but the page is in french :/
http://gatsu.ftp.free.fr/html/checkboximg/ckbimg.html
September 18th, 2006 at 2:19 am
It doesn’t work on Firefox.
October 4th, 2006 at 1:08 am
Of course it works in firefox 1.0+ under window, and i think in firefox mac also