I have read (or glimse through) all the CSS 2 specification and google a lot but found no solution for the following problem. Anyone can help?

The basic idea is the input field for the type text, password is quite small, so I want to change its width by CSS



However, this affects the width of the radio button too (in most current browser).

Is there anyway that I can apply this CSS to input field which is of the type text or password ONLY?

The tricky part is I MUST NOT use any additional attribute in input field, like class or id...

I rarely work with forms, so I don't have any ideas besides using class/ids. Why exactly are you avoiding the use of class and id?

Well... without any class or id attribute, I don't think it's possible to do it. Besides, why don't you want to use them?

Well, I always try to avoid as much class and id as I can since along the way when we writing code, once in a while I will forget to put these attribute in. Even though I will eventually figure out where in my code I missed, it's still better to have a "global" setting which will makes sure consistency for me.

There is one possible solution, although 1) i have never tested it, and 2) I don't know if it is valid CSS.

Try this:


The alternative is to simply pecify width in the html tag without using css, or nest the input in a <style> tag.

~Viz

You can match <input> elements that have the type=text property in CSS2 by using the rule "input[type=text] { }". However, I highly doubt that this is fully supported by many browsers, and so your best choice would probably be to nest the input inside a span like viz said.

This is the way to do it. It is good coding style to define the type attribute for all form fields, although "text" is assumed the default.

This is in fact supported in many browsers, but not in Internet Explorer (surprise, surprise ) Usually this isn't a problem as CSS is most of the time used to change the form field colours, backgrounds, borders; stuff that IE users can do without. But width is something you gotta get right on every browser.

If you really need the option and can't come up with other solution, you might wish to try Dean Edwards IE7: http://dean.edwards.name/IE7/ It fixes most if IE CSS issues, with no need for users to install anything.

Change: "It is good coding style to define the type attribute for all form fields" to "It is good coding style to define the type attribute for all form fields anyways"

You absolutely need to define the attribute in order the CSS2 attrribute matching to work.

Try this you can use a sty;e with most HTML elements such as the input, the above code will make a test box that is 400px wide and yes it is valid so embed the style into the tag you are concerned with when you told it input (width:400px then all input types took on that attribute, just use it in those input fields by whatever type you want to effect because you have text inputs, submit inputs, password input, checkbox inputs radio button inputs and so on, so you need to just put the style in those you want to make bigger.

You didn't read my orginal post. I said that there must be no additional attribute put in HTML code. `style` here is an attribute, and yes, I can't use it. I searched the internet for the whole 3 days and read the CSS2 specification over and over again... and probably I have to admit that they don't support it (at least for now).